⼿机端webapp界⾯设计尺⼨规范
⼿机端web/app界⾯设计尺⼨规范
移动端⾼清、多屏适配⽅案
背景
1. 开发移动端H5页⾯
2. ⾯对不同分辨率的⼿机
3. ⾯对不同屏幕尺⼨的⼿机
视觉稿
在前端开发之前，视觉MM会给我们⼀个psd⽂件，称之为视觉稿。
对于移动端开发⽽⾔，为了做到页⾯⾼清的效果，视觉稿的规范往往会遵循以下两点：
1. ⾸先，选取⼀款⼿机的屏幕宽⾼作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
2. 对于retina屏幕(如: dpr=2)，为了达到⾼清效果，视觉稿的画布⼤⼩会是基准的2倍，也就是说像素点个数是原来的4
倍（对iphone6⽽⾔：原先的375×667，就会变成750×1334）。
问题：
1. 对于dpr=2的⼿机，为什么画布⼤⼩×2，就可以解决⾼清问题？
2. 对于2倍⼤⼩的视觉稿，在具体的css编码中如何还原每⼀个区块的真实宽⾼(也就是布局问题)?
带着问题，往下看...
⼀些概念
在进⾏具体的分析之前，⾸先得知道下⾯这些关键性基本概念(术语)。
物理像素(physical pixel)
⼀个物理像素是显⽰器(⼿机屏幕)上最⼩的物理显⽰单元，在操作系统的调度下，每⼀个设备像素都有⾃⼰的颜⾊值和亮度值。
设备独⽴像素(density-independent pixel)
设备独⽴像素(也叫密度⽆关像素)，可以认为是计算机坐标系统中得⼀个点，这个点代表⼀个可以由程序使⽤的虚拟像素(⽐如: css像素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独⽴像素之间存在着⼀定的对应关系，这就是接下来要说的设备像素⽐。
设备像素⽐(device pixel ratio )
设备像素⽐(简称dpr)定义了物理像素和设备独⽴像素的对应关系，它的值可以按如下的公式的得到：
设备像素⽐ = 物理像素 / 设备独⽴像素 // 在某⼀⽅向上，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为例：
1. 设备宽⾼为375×667，可以理解为设备独⽴像素(或css像素)。
2. dpr为2，根据上⾯的计算公式，其物理像素就应该×2，为750×1334。
⽤⼀张图来表现，就是这样(原谅我的盗图)：
上图中可以看出，对于这样的css样式：
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的⼤⼩(物理尺⼨)是⼀致的，不同的是1个css像素所对应的物理像素个数是不⼀致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
位图像素
⼀个位图像素是栅格图像(如：png, jpg, gif等)最⼩的数据单元。每⼀个位图像素都包含着⼀些⾃⾝的显⽰信息(如：显⽰位置，颜⾊值，透明度等)。
谈到这⾥，就得说⼀下，retina下图⽚的展⽰情况？
理论上，1个位图像素对应于1个物理像素，图⽚才能得到完美清晰的展⽰。
在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从⽽导致图⽚模糊的情况。
⽤⼀张图来表⽰：
如上图：对于dpr=2的retina屏幕⽽⾔，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进⼀步分割，所以只能就近取⾊，从⽽导致图⽚模糊(注意上述的⼏个颜⾊值)。
所以，对于图⽚⾼清问题，⽐较好的⽅案就是两倍图⽚(@2x)。
如：200×300(css pixel)img标签，就需要提供400×600的图⽚。
如此⼀来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成    1 : 1的⽐例，图⽚⾃然就清晰了(这也解释了之前留下的⼀个问题，为啥视觉稿的画布⼤⼩要×2？)。
这⾥就还有另⼀个问题，如果普通屏幕下，也⽤了两倍图⽚，会怎样呢？
很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，⽽两倍图⽚的位图像素个数则
是200×300*4，所以就出现⼀个物理像素点对应4个位图像素点，所以它的取⾊也只能通过⼀定的算法(显⽰结果就是⼀张只有原图像素总数四分之⼀，我们称这个过程叫做downsampling)，⾁眼看上去虽然图⽚不会模糊，但是会觉得图⽚缺少⼀些锐利度，或者是有点⾊差(但还是可以接受的)。
⽤⼀张图⽚来表⽰：
手机上可以打html与css的app
针对上⾯的两个问题，我做了⼀个demo(内⽹访问)。
demo中，100×100的图⽚，分别放在100×100，50×50，25×25的img容器中，在retina屏幕下的显⽰效果。
条形图，通过放⼤镜其实可以看出边界像素点取值的不同：
爱字图，可以通过看⽂字"爱"来区分图⽚模糊还是清晰。
(ps：如果看上去不明显，可以⽤⼿机扫码⽹页(内⽹地址)或者点击看会更直观点。
⼏个问题
这⾥说⼀下，移动端H5开发，在不同分辨率，不同屏幕⼿机下会遇到的⼏个经典问题。
retina下，图⽚⾼清问题
这个问题上⾯已经介绍过解决⽅案了：两倍图⽚(@2x)，然后图⽚容器缩⼩50%。
如：图⽚⼤⼩，400×600;
1.img标签
width: 200px;
height: 300px;
2.背景图⽚
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;
这样的缺点，很明显，普通屏幕下：
1. 同样下载了@2x的图⽚，造成资源浪费。
2. 图⽚由于downsampling，会失去了⼀些锐利度(或是⾊差)。
所以最好的解决办法是：不同的dpr下，加载不同的尺⼨的图⽚。
不管是通过css媒体查询，还是通过javascript条件判断都是可以的。
那么问题来了，这样的话，不就是要准备两套图⽚了嘛？(@1x 和@2x)
我想，做的好的公司，都会有这么⼀个图⽚服务器，通过url获取参数，然后可以控制图⽚质量，也可以将图⽚裁剪成不同的尺⼨。
所以我们只需上传⼤图(@2x)，其余⼩图都交给图⽚服务器处理，我们只要负责拼接url即可。
如，这样⼀张原图：
img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原图
可以类似这样，进⾏图⽚裁剪：
// 200×200
img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg
// 100×100
img.alicdn/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg
(ps: 当然裁剪只是对原图的等⽐裁剪，得保证图⽚的清晰嘛~)
retina下，border: 1px问题
这⼤概是设计师最敏感，最关⼼的问题了。
⾸先得说⼀下，为什么存在retina下，border: 1px这⼀说？
我们正常的写css，像这样border: 1px;，在retina屏幕下，会有什么问题吗？
先来，来看看下⾯的图：
上⾯两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下⾯的测试效果，对⽐来看，对于1px的border的展⽰，它们是⼀致的，并⽆区别。
那么retina显⽰屏的优势在哪⾥，设计师为何觉得⾼清屏下(右图)这个线条粗呢？明明和左右⼀样的~
还是通过⼀张图来解释(原谅我再次盗图)：
上图中，对于⼀条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)：
.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)：
<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；的效果。
有⼈担⼼页⾯scale后会影响性能，@妙净同学做过性能测试，见(内⽹地址)。
看⼀下实现后的效果图对⽐(右图为优化过的)：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。