屏幕尺寸 如何适配不同分辨率和不同屏幕尺寸的手机

背景

开发移动H5页面

面对不同分辨率的手机，

面对不同屏幕尺寸的手机

视觉手稿

在前端开发之前，Visual MM会给我们一个psd文件，叫做Visual Draft。

对于移动开发来说，为了达到页面的高清效果，视觉稿的规范往往遵循以下两点:

首先选择一部手机的屏幕宽度和高度作为基准(以前iphone4是320×480，现在iphone6更多是375×667)。

对于视网膜屏(比如dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的两倍，也就是说像素数量会是原来的四倍(对于iphone6，原来的375×667会变成750×1334)。

问题:

对于dpr=2的手机，为什么画布大小×2可以解决高清问题？

对于大小为2倍的视觉稿，如何还原具体css编码中每个块的真实宽度和高度(即排版问题)？

带着疑问往下看...

一些概念

在做具体分析之前，首先要了解以下几个关键的基本概念(术语)。

物理像素(物理像素)

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

与器件密度无关的像素

设备无关像素(也称密度无关像素)可以看作是计算机坐标系中的一个点，代表程序可以使用的一个虚拟像素(如css像素)，然后由相关系统转换成物理像素。

因此，物理像素和设备无关像素之间存在一定的对应关系，这就是下一个设备像素比。

设备像素比(设备像素比)

设备像素比(dpr)定义了物理像素和设备独立像素的对应关系，其值可以根据以下公式得到:

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

在java中，可以通过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。

用一张图来表达，就这样(原谅我偷图):

从上图可以看出，对于这样的css样式:

1width: 2px;2height: 2px;

在不同的屏幕上(普通屏幕vs视网膜屏幕)，css像素的大小(物理大小)是一致的，不同的是一个css像素对应的物理像素个数不一致。

在正常屏幕下，一个css像素对应一个物理像素(1:1)。在视网膜屏幕下，一个css像素对应四个物理像素(1:4)。

位图像素

位图像素是光栅图像(如png、jpg、gif等)的最小数据单位。).每个位图像素包含一些自己的显示信息(如显示位置、颜色值、透明度等)。).

说到这里，就不得不说视网膜下的图片显示了。

理论上，只有一个位图像素对应一个物理像素，才能完美清晰地显示画面。

正常屏幕下没有问题，但视网膜屏幕下会出现位图像素不足，导致画面模糊。

用一张图片来表示:

如上图:对于dpr=2的视网膜屏，一个位图像素对应四个物理像素。由于单个位图像素无法进一步分割，只能就近取色，导致画面模糊(注意上面的颜色值)。

所以对于画面高清问题，更好的解决方法是画面翻倍(@2x)。

如：200×300(css pixel)img标签，就需要提供400×600的图片。比如:200×300(css像素)的img标签，你需要提供400×600的图片。

这样，位图的像素数是原来的四倍。在视网膜屏下，位图像素数可以和物理像素数形成1: 1的比例，画面自然清晰(这也解释了之前留下的一个问题，为什么视觉稿的画布尺寸要×2？)。

还有一个问题。如果在正常屏幕上使用两倍的图片会发生什么？

很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。很明显，在普通屏幕下，200×300(css pixel)img标签对应的物理像素个数是200×300，而双画面的位图像素个数是200×300*4，所以有一个物理像素对应四个位图像素，所以只能通过一定的算法才能得到它的颜色(显示结果只有原画面像素总数的四分之一，我们称这个过程为下采样。虽然用肉眼看画面不会模糊，但会觉得画面缺少一些锐度或者有点色差(但还是可以接受的)。

用一张图片来表示:

针对以上两个问题，我做了一个演示(内网访问)戳在这里。

demo中，100×100的图片，分别放在100×100，50×50，25×25的img容器中，在retina屏幕下的显示效果。演示时，100×100张图片分别放在100×100、50×50和25×25的img容器中，视网膜屏下显示效果。

条形图，通过放大镜，您实际上可以看到边界像素值的差异:

图1，颜色是在附近拍摄的，颜色值在红色和白色之间，使得画面看起来比较模糊(可以理解为拉伸画面)。

图2，附近没有颜色，颜色值不是红就是白，画面看起来很清晰。

图三，颜色是在附近拍的。颜色值在红色和白色之间，太重了。画面看起来色差，缺乏锐度(可以理解为图像挤压)。

爱一张图片，看“爱”字就能看出图片是模糊还是清晰。

几个问题

在这里，我们将谈谈不同分辨率、不同屏幕的移动终端H5在开发过程中遇到的一些经典问题。

视网膜下，画面高清问题

这个问题的解决方案上面已经介绍过了:把图片加倍(@2x)，然后把图片容器缩小50%。

如:图片尺寸，400×600；

1.img标签1.img标签

1width: 200px;2height: 300px;

2.背景图片

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

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

还下载了@2x图片，造成资源浪费。

由于下采样，图像将失去一些清晰度(或色差)。

所以最好的解决办法就是在不同的dpr下加载不同大小的图片。

可以用css媒体查询，也可以用java条件判断。

那么问题来了。这种情况下，需要准备两套图片。(@1x和@2x)

我觉得，做的好的公司都会有这样的图片服务器，可以通过url获取参数，然后控制图片的质量，还可以把图片剪成不同的大小。

所以我们只需要上传大图(@2x)，其他小图交给图像服务器处理。我们只需要负责拼接URL。

比如这样一张原图:

1https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg // 原图

您可以像这样裁剪图片:

1// 200×2002https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg_200x200.jpg34// 100×1005https://img.alicdn.com/tps/TB1AGMmIp**afXp****XX.jpg_100x100.jpg

(ps:当然，剪切只是对原图的等剪切，所以要保证画面的清晰~)

视网膜下，边框:1px问题

这可能是设计师最敏感和最关心的问题。

首先我要说，为什么网膜下会存在边界:1px这个短语？

我们正常写css，比如这个边框:1px，视网膜屏下，会不会有什么问题？

首先，我们来看一下下图:

上面两张图分别是iphone3gs(dpr=1)和iphone5(dpr=2)下的测试结果。相比之下，它们是一致的，在1px边框的显示上没有区别。

那么视网膜显示有什么优势，为什么设计师觉得高清屏幕下这条线比较粗(对)？明明和左右一样~

或者用一个图来解释(原谅我又偷了图):

上图中，对于一条宽度为1px的直线，它们在屏幕上的物理尺寸(灰度区域)确实是一样的，但区别其实是屏幕上最小的物理显示单位，也就是物理像素。所以对于一条直线来说，iphone5能显示的最小宽度实际上是从图中红色线圈开始的灰色区域，用css表示，理论上是0.5px。

所以设计师要视网膜下边框:1px事实上，它有1个物理像素宽。对于css，可以认为是边框:0.5px，它是视网膜下可以显示的最小单位(dpr=2)。

但是无奈的是，并不是所有的手机浏览器都能识别边框:0.5px在ios7、安卓等其他系统中，0.5px会被当作0px，那么如何实现这个0.5px呢？

最简单的方法是这样的(元素比例):

01.scale{02position: relative;03}04.scale:after{05content:"";06position: absolute;07bottom:0px;08left:0px;09right:0px;10border-bottom:1px solid #ddd;11-webkit-transform:scaleY(.5);12-webkit-transform-origin:0 0;13}

我们照常写border-bottom:1px solid # DDD；，然后用transform: scaleY(.5)缩小0.5倍达到0.5px的效果，但是这个hack不够通用(比如圆角等)。)，而且写起来比较麻烦。

当然，还有很多其他的黑客方法，可以在网上搜索，但各有利弊。这里推荐的方案是页面比例，比较笼统，几乎可以满足所有场景。

对于iphone5(dpr=2)，添加以下元标签并设置视口(比例0.5):

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

这样，页面中所有的border: 1px都会减少0.5，从而达到border:0.5px；的效果。

有人担心页面缩放后会影响性能。@苗晶做了一个性能测试。见此处(内网地址)。

看一下实现的效果图的对比(右侧优化):

然而，页面规模不可避免地会带来一些问题:

字体大小将被缩放

页面布局将被缩放(例如，div的宽度和高度)

这两个问题后面会提到…

多屏自适应布局问题

对于手机布局，为了适应各种大屏幕手机，目前最好的解决方案是使用相对单元rem。

基于rem的原理，我们需要做的是针对不同的手机屏幕尺寸和dpr动态改变根节点html的字体大小(参考值)。

这里我们提取一个公式(rem代表参考值)

1rem = document.documentElement.clientWidth * dpr / 10

描述:

乘以dpr，因为页面可能缩放)1/dpr次，以实现1px边框页面(如果不是，dpr=1)。

除以10是为了四舍五入和方便计算(理论上可以是任意值)

所以像下面这样，html的字体大小可能是:

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

为了动态改变根节点html的字体大小，我们可以通过css或java来实现。

在css模式下，html的字体大小可以通过设备宽度的媒体查询来改变:

01html{font-size: 32px;}02//iphone 603@media (min-device-width : 375px) {04html{font-size: 64px;}05}06// iphone6 plus07@media (min-device-width : 414px) {08html{font-size: 75px;}09}10*/

缺点:通过设备宽度范围间隔等媒体查询动态改变rem参考值不够准确。比如宽度为360px、宽度为320px的手机，因为屏幕宽度在同一区间(

在java模式下，通过上面的公式计算参考值rem，然后编写如下的样式(代码参考自kimi的m-base模块)

01vardpr, rem, scale;02vardocEl = document.documentElement;03varfontEl = document.('style');04varmetaEl = document.querySelector('meta[name="viewport"]');0506dpr = window.devicePixelRatio || 1;07rem = docEl.clientWidth * dpr / 10;08scale = 1 / dpr;091011// 设置viewport，进行缩放，达到高清效果12metaEl.setAttribute('content', 'width='+ dpr * docEl.clientWidth + ',initial-scale='+ scale + ',maximum-scale='+ scale + ', minimum-scale='+ scale + ',user-scalable=no');1314// 设置data-dpr属性，留作的css hack之用15docEl.setAttribute('data-dpr', dpr);1617// 动态写入样式18docEl.firstElementChild.(fontEl);19fontEl.innerHTML = 'html{font-size:'+ rem + 'px!important;}';2021// 给js调用的，某一dpr下rem和px之间的转换函数22window.rem2px = function(v) {23v = parseFloat(v);24returnv * rem;25};26window.px2rem = function(v) {27v = parseFloat(v);28returnv / rem;29};3031window.dpr = dpr;32window.rem = rem;

这样就可以准确计算出不同屏幕应该有的rem基准值。缺点是加载这样的js代码，但个人认为这是目前最好的解决方案。

因为这个方案同时解决了三个问题:

边框:1px问题

画面高清问题

屏幕适配布局问题

说到版式，自然要回答原问题:如何在css编码中还原视觉稿的真实宽度和高度？

先决条件:

我为iphone6拿到了一张750×1334的高清视觉稿

采用以上HD方案(js代码)。

如果有块，psd文件中测到宽高为750×300px的div，如何转换成rem单位？

公式如下:

1rem = px / 基准值;

对于iphone6的一个视觉草稿，它的基准值是75(前面提到过)；

因此，在确定了视觉草稿(即确定了基准值)之后，我们通常会编写一个具有较少的mixin，如下所示:

1// 例如: .px2rem(height, 80);2.px2rem(@name, @px){3@{name}: @px / 75 * 1rem;4}

因此，对于宽高为750×300px的div，我们用较少的篇幅这样写:

1.px2rem(width, 750);2.px2rem(height, 300);

转换成html，就这样:

1width: 10rem; // -> 750px2height: 4rem; // -> 300px

最后，因为dpr是2，页面比例是0.5，所以手机屏幕上显示的真实宽度和高度应该是375×150px，刚刚好。

如果页面的比例不是0.5，我们的代码如下所示:

1.px2rem(width, 375);2.px2rem(height, 150);

这个宽度和高度，我们通常是这样得到的:

把750×1334的视觉稿转换成375×667的尺寸后，测量一下这个块的大小(感觉很傻)。

750×1334的块宽高为750×300px后，除以2(感觉麻烦)。

最后，给出了无布局调整(上图)和有快速眼动布局调整(下图)的对比图:

(以上手机有:iphone3gs、iphone5、iphone6)

显而易见，rem适配的每个块的宽度和高度都会随着手机屏幕宽度的变化而变化。最明显的是看图片列表的部分。最后一张图片的视觉稿只需要一点外观，rem布局在任何屏幕下都显示的很好。

字体大小问题

既然上面的方案会缩放页面，那么页面块的宽度和高度可以依靠高清的可视稿，因为可视稿本来就是×2，所以可以直接测量，那么字体怎么办呢？

对于字体缩放问题，设计师最初的要求是:任何手机屏幕上的字体大小都要统一，所以我们会针对不同的分辨率(不同的dpr)做以下工作:

1font-size: 16px;2[data-dpr="2"] input {3font-size: 32px;4}

(注意rem不能用于字体，误差太大，任何屏幕下的字体大小都不可能相同。)

为了方便起见，我们还将编写一个包含较少:

01.px2px(@name, @px){02@{name}: round(@px / 2) * 1px;03[data-dpr="2"] & {04@{name}: @px * 1px;05}06// for mx307[data-dpr="2.5"] & {08@{name}: round(@px * 2.5 / 2) * 1px;09}10// for 小米note11[data-dpr="2.75"] & {12@{name}: round(@px * 2.75 / 2) * 1px;13}14[data-dpr="3"] & {15@{name}: round(@px / 2 * 3) * 1px16}17// for 三星note418[data-dpr="4"] & {19@{name}: @px * 2px;20}21}

(注意:html的data-dpr属性之前在js方案中有提到，所以这里有用。)

根据经验和测试，还是会有这些奇怪的dpr，这里统一兼容~

当你使用它时，它是这样的:

1.px2px(font-size, 32);

当然，对于其他css属性，如果要求它们在不同的dpr下保持一致，也可以这样做，比如:

1.px2px(padding, 20);2.px2px(right, 8);

最后

在上面，我们总结了H5高清和多屏适配在移动终端上的一些解决方案，并讲解了相关知识。还请指出错误的地方