放羊的阿波罗
前端开发工程师
性别：男坐标：宁波工龄：4年又是单身！
博客
记得 次做移动端页面的时候，发现手机上显示的页面好小啊，还有横向滚动条出现，当时心里面是“我次奥~怎么这样子啊~”。后来才知道是因为移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的页面宽度设为或者（也可能是其它值，这个是由设备自己决定的），
那么如何让页面正常的在移动端显示呢？很简单我们需要设置viwport,我们在网上最常见的设置如下：
它规定了页面的宽度为设备宽度，缩放为1，且不允许用户进行缩放。这样子就能解决横向滚动条已经页面小的问题了。
那么问题又来了，iphon4和iphon6的屏幕大小不一样啊，那么同样一个width为的元素在两个手机上占比不一样啊(我次奥~做前端怎么这么苦啊)。那么如何做到一个设计稿在不同尺寸的手机屏幕下完美呈现呢?有一段时间我用了targt-dnsitydpi=dvic-dpi这个属性，这样css中的1px会等于物理像素中的1px。然而这个属性很多手机都不支持（大兄弟！能不能不搞事啊）。有的时候想想算了吧，某些手机上大点就大点呗（作为一个有时候太随意的前端表示很惭愧，设计师会打你的你知道么、怎么每次做出来跟设计稿不一样啊。）
那么到底有没有更完美的解决方案呢？答案是当然有啦。我们就来参考一下淘宝的做法吧,原理其实也很简单，就是用rm以及设置initial-scal来实现等比适配。
initial-scal是用来设置页面的初始缩放值，我们得到的页面宽度是屏幕宽度/initial-scal（当我们同时设置width和initial-scal时，我们将取得两者 的来作为页面的宽度）。然后我们rm基准设置为页面宽度/10,这样我们就可以很方便的通过rm来等比缩放了。
以iphon4、和iphon6为例，我们的设计稿是宽，那么假设一个div宽64，高64；
iphon4下
iphon6下
哈哈这样就实现了等比缩放咯，不过对于Rtina屏来说它们的设备像素比率可能为2或者3。也就是说1px能够显示2或者3的物理像素。也就是说我们在iphon4下可以把页面的宽度设置成/0.5=px的宽度，从而能够更高清。设备像素比率可以通过window.dvicPixlRatio来获取
iphon4下
那么接下来我们简单的用js来判断屏幕动态的添加mta标签吧
这样就简单的实现了适配啦。当然淘宝已经有相应的类库啦。我们直接引用一下就ok啦。