浅谈移动端适配

https://github.com/sunmaobin/sunmaobin.github.io/issues/27
http://div.io/topic/1092

移动端相关问题：

1、border: 1px问题
2、图片高清问题
3、屏幕适配布局问题

CSS中的1px并不等于设备的1px

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

一些概念

物理像素(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)。

viewport/视口

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域[1]，但不一定是我们可见的区域。
在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

关于三个viewport的理论

• Visual Viewport

Visual Viewport: 可见视口。就是移动设备上可以被我们看见的部分。宽度在移动端通过window.innerWidth获得（仅限移动端，PC上哪怕是chrome模拟也会有不同的结果）。

• Layout Viewport

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。宽度可以通过document.documentelement.clientWidth来获取。

• 理想视口/Ideal Viewport

Ideal Viewport：理想视口，其实就是设备的可见区域，和可见视口一致。
设置Ideal Viewport的好处是，只要按照Ideal Viewport来设计样式稿，用户就能不用左右滑动和放大缩小来查看网站。

移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。
设置理想视口：

这段代码的意思是将布局视口的宽度设置为设备宽度，初始缩放比例为1，最大缩放比例为1，用户不能缩放。
其中设置和效果一样，即把当前的viewport宽度变成ideal viewport的宽度。
如果width 和 initial-scale=1同时出现，并且还出现了冲突，以哪个为准呢？比如：

width=400表示把当前viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。

解决问题

• 图片高清问题

两倍图片（@2x），容器缩小50%；

• border: 1px问题

.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;
}