一篇真正教会你开发移动端页面的文章(二)
来源：HcySunYang
http://hcysun.me/2015/10/19/一篇真正教会你开发移动端页面的文章-二/
之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面
好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。
首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块：
拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码：
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
head>
<body>
<div class="box">div>
body>
html>
HTML代码写好了，你用了一个带有box类的div标签作为ps稿中的红色块，经过尺寸测量，你为上面代码添加了CSS样式，最后你的代码是这样的：
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
head>
<body>
<div class="box">div>
body>
html>
上面的代码中，你只是在原来的基础上增加了CSS样式，首先你清除了body标签上的默认样式，这个没什么好说的，然后你根据设计图中测量的尺寸来给box编写样式，宽200px;高200px;背景红色。看上去并没有什么问题，于是你开开心心的打开浏览器，刷新页面，你的脸色沉了下来，因为你看到了你不想看到的结果，如下图，上图为设计稿的样式，下图为你编写的html文件的样式：
通过对比psd原稿和我们目前所写的html页面，可以看出我们html页面的问题，红色方块与整个页面的比例和psd原稿不一样啊，那么为什么我们明明是按照原稿测量的尺寸写出来的代码却和psd原稿显示的效果不一样呢？别忘了，psd原稿的尺寸是按照设备像素设计的，由于我们所用的设计稿是基于iPhone6设计的，所以我们设计稿的尺寸就是iPhone6的设备像素的尺寸，也就是750px，而我们CSS中的样式是基于布局视口的尺寸计算的，由于我们html页面中由于写入了以下meta标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
在上一篇我们讲过， width=device-width 这段代码是让布局视口的尺寸等于理想视口。
根据公式(缩放比例为1)：
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）
因为iPhone6的DPR（设备像素比）为2，设备像素为750，所以iPhone6的理想视口尺寸为375px。所以上面代码最终导致的是：使我们布局视口的宽度变成了375px。而我们CSS中编写的样式尺寸又是基于布局视口计算的，所以我们得到的页面看上去比例不对，如下图：
如上面两幅图片，我们知道，psd稿的总宽是750px，元素宽200px，而我们真正做页面的时候，布局视口的宽度是375px，正好是设计稿的一半。所以我们不能直接使用设计稿上面测量所得的像素尺寸，根据比例，我们应该将测量所得的尺寸除以2，才是我们CSS中布局所用的尺寸，据此，我们将200px除以2得到100px，于是我们修改代码，将红色方块的宽高都设为100px，刷新页面，看看比例是不是和设计图一样了？答案是肯定的，如下图为修改后的html页面：
这样，我们就得到了正确的数据，并且正确的写出了页面，你很高兴，可是问题来了，如果你在做页面的时候，测量了一个元素的宽度，宽度是一个奇数，比如111像素，按照我们之前的做法是，将测量到的数据除以2，得到我们真正使用的数据，所以111除以2等于55.5px，我们知道，计算机(手机)没办法显示不到一个像素的像素值，计算机(手机)会自动将其补全为一个像素进行显示，所以最终会将元素显示为56像素，这并不是我们想要的结果。
另外，我们的设计稿是基于iphone6设计的，我们调试页面也是在iphone6下调试的。又因为iphone6的设备像素比试2，所以我们才能由设计稿测量的数据除以2后直接使用，并且在iphone6下没有问题，但是你要知道，并不是所有手机的设备像素比都是2，有的手机的设备像素比试2.5或者3。并且不同设备的设备像素又不同，这样就导致理想视口的尺寸不同，从而导致布局视口的尺寸不同，那么我们直接根据iphone6的设计稿尺寸除以2得到的尺寸用来编写CSS是不能在所有设备下完好显示的。
所以，我们要换一个方法。
于是我们想到：如果我们能将布局视口的尺寸设置为和设备像素尺寸相等的话，这样我们就保证了设计图与页面的1:1关系，那么我们就可以直接使用psd中测量的尺寸了，然后在其他尺寸的手机中，我们进行等比缩放就ok了。那么如何才能让布局视口的尺寸等于设备像素尺寸呢？
我们注意到meta标签中的 width=device-width 这段代码，首先你要明白这句话的意思，前面讲过，这句话最终导致的结果是：让布局视口的尺寸等于理想视口的尺寸。言外之意就是,在代码 width=device-width 中：
width：是布局视口的width
device-width：是理想视口的宽度
根据公式(缩放比例为1)：
设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）
以iphone6为例：
设备像素比（DPR）：2
设备像素个数：750
所以在缩放比例为1的情况下，iphone6理想视口的像素个数为 750 / 2 = 375，也就是说，对于iphone6来讲 device-width的值为375
所以我们通过width=device-width这句话，间接的将布局视口的尺寸设为了375，也就是说，如果我们能改变理想视口的尺寸，也就改变了布局适口的尺寸，如何改变理想视口的尺寸呢？这就要讲到缩放了，上一篇我们讲到过缩放，缩放是缩小或放大CSS像素的过程，以iphone6为例，当我们缩放比例为1:1的时候，由于iphone6的设备像素比为2，所以iphone6的设备像素与CSS像素的关系看起来就像下图这样：
一个CSS像素宽度等于两个设备像素宽度，所以750px的设备宽度的布局视口为357CSS像素。这是在缩放比例为1的情况下，既然缩放可以放大或缩小CSS像素，所以如果我们将CSS像素的宽度缩放至与设备像素宽度相等了，那么750个设备像素也就能显示750个CSS像素，缩放后的设备像素与CSS像素看起来应该像下图这样：
但是，我们的缩放倍数是多少呢？在缩放比例为1的时候，一个CSS像素的宽度 = 两个设备像素的宽度，如果我们想让 一个CSS像素的宽度 = 一个设备像素的宽度，我们就要将CSS像素缩小为原来的0.5倍，实际上，我们缩小的倍数 = 设备像素比的倒数。
于是，我们修改上面的HTML代码(修改了meta标签)：
<html>
<head>
<title>title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=no" />
head>
<body>
<div class="box">div>
body>
html>
注意，上面代码中我们给红色方块使用的CSS尺寸直接使用的是psd稿中测量的尺寸，我们刷新页面，怎么样？满意吧：
但是我们这是有个前提的，那就是缩放0.5倍只适用于设备像素比为2的设备（因为缩放值 = 1 / 设备像素比）。所以，为了适应所有的设备，我们应该用javascript代码动态生成meta标签：
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
其中 window.devicePixelRatio 的值为设备像素比。
于是我们的代码变成了这样：
<html>
<head>
<title>title>
<meta charset="utf-8" />
<meta name="viewport" content="" />
head>
<body>
<div class="box">div>