移动端适配方案

949字约3分钟

development

2020-08-14

背景

移动端设备由于不同品牌、不同机型，不同设备中，使用的不同浏览器，带来的一系列适配问题。在这些设备中，如何实现展示效果、交互的一致性，是比较头疼的问题。

发展

早期的适配方案五花八门。

在2015年双十一左右，阿里前端团队 AmFe 分享了 flexiable 的移动端适配方案，在往后的几年中， flexiable成为了主流的移动端适配方案在各大移动端应用中使用。

随着技术的发展，CSS3的viewport越来越得到了更多的设备支持，逐渐的可以直接使用 viewport 来作为移动端适配方案，2017年左右开始步入开发者的视野。

后来 AmFe 宣布推荐使用 viewport 方案代替 flexible，viewport方案逐渐成为主流适配方案。

lib-flexible 方案介绍

viewport

viewport 即浏览器窗口，在移动端设备中，viewport太窄，为了更好的服务于CSS，提供了 visual viewport 和 layout viewport

物理像素（physical pixel）

物理像素即设备像素，是显示设备中最微小的物理部件。

设备独立像素（density-independent pixel）

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由系统转换为物理像素

CSS像素（CSS pixel）

css像素是一个抽象单位，主要用在浏览器上，用来精确的度量Web页面上的内容。

一般情况下， CSS像素称为设备无关的像素，简称 DIPs

屏幕密度

屏幕密度是指一个设备表面上存在的像素密度，它通常已每英寸有多少像素来计算（PPI）

设备像素比（device pixel ratio）

简称 DPR，定义了物理像素和设备独立像素的对应关系

设备像素比 = 物理像素 / 设备独立像素

简要说明

flexiable 通过hack手段，根据设备的dpr值相应改变 <meta> 标签中viewport的值：

<!-- dpr = 1-->
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
<!-- dpr = 2-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
<!-- dpr = 3-->
<meta
  name="viewport"
  content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no"
/>