移动端屏幕适配

移动端 H5 页面不可遗忘的 meta 标签 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

这行代码的作用是设置视口的宽度（其实就是页面的宽度）等于设备宽度，页面不缩放并且也不允许用户进行缩放。

把一个普通的PC端页面（未加入上面 meta 标签的）直接放在手机端访问是可以展示完全的，但是页面明显经过缩放。可以用 alert(document.body.clientHeight) 获取一下页面宽度，你会发现，大部分页面的宽度都是980px。再用alert(window.innerWidth)获取一下设备宽度，很明显，手机端自动将980px的页面缩放到了window.innerWidth的宽度才得以完全展示。但这不是我们想要的效果，我们想要的是未经缩放，以最佳样式展现的Web页面。每一个移动端页面都应该首先加入上面这行 meta 标签，这样才能确保页面得到了最佳的展现形式。

### CSS 屏幕适配之媒体查询(media query)

PC 端常用的CSS测量单位是 px，而移动端常用的却是 rem。这样做的原因仍然是为了适配多种屏幕尺寸。怎么适配呢？首先需要弄清楚rem单位，rem是相对于DOM根元素(也就是)的字体大小的度量单位。比如说我们设置了 html{ font-size: 16px }，然后给具体的DOM设置 p{ font-size: 2rem; height: 4rem; }，其实就相当于设置了 p{ font-size: 2*16px; height: 4*16px; }，也就是 1rem = 1*(html的fontSize)，2.5rem=2.5*(html的fontSize)。这样就很清楚了，我们只需要控制不同屏幕尺寸下 html 的 fontSize，页面上所有使用 rem 度量的DOM的尺寸都会相应改变。比如以下适配代码：

html{font-size: 18px}
@media only screen and (min-360px){html{font-size: 20px!important}}
@media only screen and (min-375px){html{font-size: 21px!important}}
@media only screen and (min-400px){html{font-size: 22px!important}}
@media only screen and (min-414px){html{font-size: 23px!important}}
@media only screen and (min-480px){html{font-size: 24px!important}}
@media only screen and (min-540px){html{font-size: 26px!important}}
@media only screen and (min-640px){html{font-size: 28px!important}}
@media only screen and (min-768px){html{font-size: 32px!important}}
@media only screen and (min-960px){html{font-size: 36px!important}}
@media only screen and (min-1024px){html{font-size: 46px!important}}

上面一块代码的意思就是:

1. 屏幕尺寸小于360px时，html 的 fontSize 就是18px；
2. 当屏幕尺寸位于区间 [360px, 375px] 时，html 的 fontSize 就是 20px；
3. 当屏幕尺寸位于区间 [375px, 400px] 时，html 的 fontSize 就是 21px；
4. 以此类推，如果屏幕尺寸大于 1024px 的话，html 的 fontSize 都是46px。

上面CSS媒体查询是一个区间一个区间地进行适配的，当然也可以使用 JS 进行更精细的适配，但归根结底无非都是通过改变viewport的scale值和根节点html的fontSize值进行整体调整的。

### 设计师出 2 倍视觉稿，前端还原成 1 倍页面，是在瞎折腾？

这样做当然是有原因的，在解释这个问题之前，先介绍一些像素小知识。

1. 物理像素（也叫设备像素）
   物理像素是显示器上最小的显示单元，电脑、电视、手机、平板这些电子设备的屏幕都是由一个个物理像素点组成的，连点成线，线再成面。在系统的调度下，每一个物理像素可以且仅可以显示单独的颜色值和亮度值。
   比如 iPhone5 的屏幕有 640x1136 个物理像素，注意到了吗，物理像素的总量其实就是所谓的分辨率。分辨率越高，物理像素点就越多，屏幕上能表现的颜色值就越多，画面就越细腻。

2. 设备独立像素（也叫CSS像素，逻辑像素）
   设备独立像素的学术解释就是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素，然后由底层系统的程序转换为物理像素。怪不得都不喜欢去看这些学术性的解释，真的是佶屈聱牙，抽象难懂。
   其实在我看来，设备独立像素就是UI设计师设计工具(如Photoshop)中的像素，而UI设计师通常就在电脑上进行设计作业的，所以设备独立像素其实就是电脑屏幕上的物理像素。每一个设备独立像素可以表示一个或多个颜色值和亮度值。
   iPhone5 屏幕的设备独立像素数量是 320x568，为什么这么说呢，因为在普通电脑屏幕上，1 个设备独立像素是对应着 1 个物理像素的，你把 iPhone5 的屏幕贴在电脑屏幕上，那一块和iPhone5屏幕等大的电脑屏幕区域物理像素数量是多少，没错正好是320x568。嘿嘿，明白了吧，设备独立像素是设计师和前端工程师进行作业时的测量单位。

3. 设备像素比（Device Pixel Ratio）
   DPR 的计算公式如下：

设备像素比 = 设备像素/设备独立像素        // 在某一方向上，x方向或y方向 DPR 的意义就是用来表示设备会分配多少个物理像素来展示1个设备独立像素，一般是DPRxDPR个。比如由公式可计算出 iPhone5 的 DPR 为 2，那么 iPhone5 就会分配 2x2=4 个物理像素来展示1个设备独立像素。

其实现在市面上的很多机型 DPR 都是 2，也因此UI设计师为移动端所做的设计图通常是 2 倍图。为什么这样做呢，拿iPhone5来说吧，如果设计图尺寸是320x568也就是等于设备的逻辑像素数量，当然是可以的，但这样就浪费了硬件优势了，因为设计图上的1个CSS像素映射到手机屏幕上，手机屏幕会分配4个物理像素来展示它，很显然，4个物理像素的颜色值和亮度值都一样。而如果设计成2倍图，那就是等于设备的物理像素数量了，设计师可以尽情发挥，设计更细腻的画面，手机屏幕也可以充分发挥出高分辨率的优势。设计成2倍图会出现一个问题，比如本来一张图片是希望它在手机上呈现为 100x100（CSS像素）的尺寸，结果设计师把它设计成200x200（CSS像素）的，如果直接放在手机上，也会呈现 200x200（CSS像素）的，而不是100x100（CSS像素），就会显得非常大，这时候就轮到前端工程师隆重登场了，前端在还原设计图时所有尺寸都应该减半，也就是还原成1倍页面。比如设计图上的200x200（CSS像素）的尺寸，在页面上对应地写成100x100（CSS像素），这样它在页面上就会占据100x100个CSS像素了，手机系统会分配100x100x4个物理像素去展示这100x100个CSS像素，这样就可以充分展现设计图中的色彩信息了。