移动端自适应布局研究

背景

开发移动端H5页面
面对不同分辨率的手机
面对不同屏幕尺寸的手机

基础概念

  1. 物理像素(physical pixel)
    一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。

  2. 设备独立像素(density-independent pixel)
    设备独立像素(狭义:设备宽高),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

  3. 设备像素比(device pixel ratio )
    设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:

    1
    设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向

在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

iphone6为例:

设备宽高为375×667,可以理解为设备独立像素(或css像素)。
dpr为2,根据上面的计算公式,其物理像素就应该×2,为750×1334

在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下,1个css像素对应 4个物理像素(1:4)。

用一张图来表现,就是这样:

原谅我也盗图了

问题汇总

retina下,图片高清问题

解决方案:两倍图片(@2x),然后图片容器缩小50%。
如:图片大小,400×600;

1
<img width=200 height=300 />

背景CSS

1
2
3
4
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;

这样的缺点,很明显,普通屏幕下:

同样下载了@2x的图片,造成资源浪费。
图片由于downsampling,会失去了一些锐利度(或是色差)。

所以最好的解决办法是:不同的dpr下,加载不同的尺寸的图片。
不管是通过css媒体查询,还是通过javascript条件判断都是可以的。

PS: 更好的解决方案,通过图片服务器,服务端裁剪图片。

retina下,border: 1px问题

直接上图:
对比图

上图中,对于一条1px宽的直线,它们在屏幕上的物理尺寸(灰色区域)的确是相同的,不同的其实是屏幕上最小的物理显示单元,即物理像素,所以对于一条直线,iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域,用css来表示,理论上说是0.5px。

所以,设计师想要的retina下border: 1px;,其实就是1物理像素宽,对于css而言,可以认为是border: 0.5px;,这是retina下(dpr=2)下能显示的最小单位。

然而,无奈并不是所有手机浏览器都能识别border: 0.5px;,ios7以下,android等其他系统里,0.5px会被当成为0px处理,那么如何实现这0.5px呢?

最简单的一个做法就是这样(元素scale):

1
2
3
4
5
6
7
8
9
10
11
12
13
.scale{
position: relative;
}
.scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}

我们照常写border-bottom: 1px solid #ddd;,然后通过transform: scaleY(.5)缩小0.5倍来达到0.5px的效果,但是这样hack实在是不够通用(如:圆角等),写起来也麻烦。

当然还有其他好多hack方法,网上都可以搜索到,但是各有利弊,这里比较推荐的还是页面scale的方案,是比较通用的,几乎满足所有场景。

对于iphone5(dpr=2),添加如下的meta标签,设置viewport(scale 0.5):

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

多屏适配布局问题

核心方案:rem等比例适配,也是直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}

通过JS动态改变html根节点字号可以等比改变所有用了rem单位的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这里的设计稿是按640的尺寸来设定的,不同分辨率下font-size的值如下:

华丽盗图,请勿追究!

以上选取自:
移动端高清、多屏适配方案[^1]
web app变革之rem