移动端页面适配———多方案解析

下面是一些基础概念的讲解，帮助理解各种适配方案实现。

像素：

1、物理像素（设备像素）

屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了，且固定不变的。

2、设备独立像素

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

3、设备像素比

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

设备像素比 ＝ 物理像素 / 设备独立像素
以iphone6为例：
iphone6的设备宽和高为375pt * 667pt，可以理解为设备的独立像素，而其设备像素比为2.固有设备像素为750pt * 1334pt

通过：window.devicePixelRatio获得。

设备像素比是区别是否是高清屏的标准，dpr大于1时就为高清屏，一般情况下dpr为整数，但是android有些奇葩机型不为整数。

4、css像素

在CSS、JS中使用的一个长度单位。单位px

注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px，1物理像素与px的关系与以下因素有关。(有些视口概念，可以把下面视口看完了再来看)

1、屏幕布局视口大小(下面会讲到)
2、屏幕的分辨率(物理像素)

对于一块屏幕，其物理像素是确定的。视觉视口尺寸是继承的布局视口的，而视觉视口里宽度即是css的px数。故在一块屏上物理像素与px的关系就是物理像素与布局视口的px数的关系。

比如iphone6，期物理像素为750，如果没有设置布局视口时，viewport为980px
此时：1物理像素长度等于980/750px = 1.3067px的长度
由于像素都是点阵的，故1物理像素相当于1.3067px * 1.3067px方格。
当在meta中设置了如下配置时
<meta name="viewport" content="width=device-width">
相当于把布局视口设置为设备的宽度(即上面讲到的设备独立像素)， 对于iphone6就是375px。
此时1物理像素长度等于375/750px = 0.5px的长度，故1物理像素相当于0.5px * 0.5px的方格。

视口：

1、布局视口：

在html中一般在meta中的name为viewport字段就是控制的布局视口。布局视口一般都是浏览器厂商给的一个值。在手机互联网没有普及前，网络上绝大部分页面都是为电脑端浏览而做的，根本没有做移动端的适配。随着移动端的发展，在手机上看电脑端的页面已成为非常普及现象。而电脑端页面宽度较大，移动端宽度有限，要想看到整个网页，会有很长的滚动条，看起来非常麻烦。于是浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口设置的很大，一般在768px ~ 1024px 之间，最常用的宽度就是 980。这样用户就能看到绝大部分内容，并根据具体内容选择缩放。

故布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。

布局视口可以通过：

document.documentElement.clientWidth(clientHeight) // 布局视口的尺寸。

2、视觉视口：

浏览器可视区域的大小，即用户看到的网页的区域。(其宽度继承的布局视口宽度)

window.innerWidth(innerHeight)  // 视觉视口尺寸

3、理想视口:

布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。所以苹果引入了理想视口，它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面。最简单的做法就是使布局视口宽度改成屏幕的宽度。

可以通过window.screen.width获取。

<meta name="viewport" content="width=device-width">

移动端到底怎么适配不同的屏幕呢？最简单的方法是设置如下视口：

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

当使用以上方案定义布局视口时，即布局视口等于理想视口（屏幕宽度），屏幕没有滚动条，不存在高清屏下，字体较小的问题。但是在不同屏幕上，其视觉宽度是不同的，不能简单的将所有的尺寸都设置为px，可能会出现滚动条。小尺寸的可以用px，大尺寸的只能用百分比和弹性布局。

viewport缩放

对于上面的设置，再不同的屏幕上，css像素对应的物理像素具数是不一致的。

在普通屏幕下，dpr=1时，

1个css像素长度对应1个物理像素长度，1个css像素对应1个物理像素。

而在Retina屏幕下，如果dpr=2，

1个css像素长度对应2个物理像素长度，1css像素对应4个物理像素。

此时如果css中写

border: 1px solid red; // 此时1px 对应的宽度是2物理像素的宽度。

而一般现在移动端设计稿都是基于iphone设计的，稿子一般为750px或640px，这正好是iphone6和iphone5的物理像素。在设计稿中，一般有些边框效果，这时边框的线宽为1px，对应的就是1物理像素。而对于iphone5和iphone6，当width=device-width时，css的1px显示出来的是2个物理像素，所以看起来线就比较粗。怎么解决呢？1px边框效果其实有很多hack方法，其中一种就是通过缩放viewport。

initial-scale是将布局视口进行缩放，initial-scale是相对于理想视口的，即initial-scale=1与width=device-width是一样的效果。initial-scale=0.5等效于width= 2倍的device-width，所以设置initial-scale和width都可以改变布局视口的大小。

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">  

对于iphone6当添加如上设置后，initial-scale=0.5,即将页面缩小2倍后等于屏幕宽度。

布局视口width:
width / 2 = 375px; width = 750px;

所以此时布局视口为750px，此时1px等于1物理像素。

适配方案：

上面讲了一些基础概念，下面讲具体适配。

对于ui设计师给的一张设计稿，怎么将其还原到页面上？对于不同手机屏幕，其dpr不同，屏幕尺寸也不同，考虑到各种情况，有很多适配方案，所以不同的适配方案，实现方法不同，处理复杂度也不同，还原程度也不同。

方案一：

固定高度，宽度自适应。

这种方案是目前使用较多的方案，也是相对较简单的实现方案：

该方法使用了理想视口：

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

垂直方向使用固定的值，水平方向使用弹性布局，元素采用定值、百分比、flex布局等。这种方案相对简单，还原度也非常低。

方案二：

固定布局视口宽度，使用viewport进行缩放

如：荔枝FM、网易应用

荔枝的代码：

if(/Android (d+.d+)/.test(navigator.userAgent)){
  var version = parseFloat(RegExp.$1);
  if(version>2.3){
    var phoneScale = parseInt(window.screen.width)/640;
    if(/MZ-M571C/.test(navigator.userAgent)){
      document.write("<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">");
    }else if(/M571C/.test(navigator.userAgent)&&/LizhiFM/.test(navigator.userAgent)){
      document.write("<meta name="viewport" content="width=640, minimum-scale = 0.5, maximum-scale= 0.5">");
    }else{
      document.write("<meta name="viewport" content="width=640, minimum-scale = "+ phoneScale +", maximum-scale = "+ phoneScale +", target-densitydpi=device-dpi">");
    }
  }else{
    document.write("<meta name="viewport" content="width=640, target-densitydpi=device-dpi">");
  }
}else{
  document.write("<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">");
}
    

固定布局视口，宽度设置固定的值，总宽度为640px，根据屏幕宽度动态生成viewport。（设计稿应该是640px的）

<meta name="viewport" content="width=640, minimum-scale = 0.5625, maximum-scale = 0.5625, target-densitydpi=device-dpi">

这种方式布局如荔枝FM的网页宽度始终为640px。缩放比例scale为：

var scale = window.screen.width / 640

设计稿为640px时，正好可以1:1以px来写样式。但是1px所对应的物理像素就不一定是1了。

(window.screen.width * dpr) / 640   // 1px对应的物理像素

iphone5.png

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

• 上一篇： 移动端前端适配方案对比
• 下一篇： 关于移动端适配的几个方法，快速构建响应式网站必备知识