一、背景
通俗来讲，css中的1px对应电脑屏幕的1个物理像素，那么css中的像素就是屏幕的物理像素吗？这只是一个错觉，而实际上css中的px可以理解为一个抽象单位，在不同设备中，css的1px表示的物理像素是不一样的，特别是在移动设备上。
为什么css的px不代表物理像素呢？
理由一：在window对象中，存在这样一个属性(设备像素比例)，devicePixelRatio=物理像素 / 独立像素，定义为：设备物理像素和独立像素的比值。例如，iphone手机屏幕上，devicePixelRatio=2，那么css中的1px也就是独立像素，表示两个物理像素;
理由二：页面的缩放会导致css中的px变化，当用户将移动端页面放大一倍，css中的1px所代表的物理像素也会放大一倍。
二、viewport
1. layout viewport
a. 前因
理论上，在pc端浏览器所显示的页面，在移动端的浏览器上都应该正常显示；
但是，将viewport作为浏览器的可视区域，移动端屏幕是不够宽的，网页的布局必然会乱掉；
就算是现在的手机分辨率都很高了，但是屏幕尺寸是没有变大很多的，那么屏幕密度就变大了，意味着css的1px代表更多的物理像素，这会导致css中1px的元素在移动端页面看起来很小很小。
b. 后果
默认情况下浏览器把viewport设为一个较宽的值，通常是980px，pc端的网页就能在移动端正常显示了，把这个默认的viewport叫做layout viewport，layout viewport就是网页的全部内容。
layout viewport的宽度可以通过document.documentElement.clientWidth获取。
2. visual viewport
既然有了默认的viewport（也就是前面提到的layout viewport），layout viewport的宽度会大于浏览器的可视区域宽度，那么就应该有一个代表可视区域的宽度，把这个可视区域的viewport叫做visual viewport，visual viewport是用户能看到的内容窗口，可以缩放和滚动。
visual viewport的宽度可以通过window.innerWidth来获取。
3. ideal viewport
虽然有了layout viewport和visual viewport，但浏览器觉得这是不够的，想要在任何分辨率的屏幕下，不需要用户手动缩放、手动滚动，就可以完美的展示页面；
把移动设备的理想viewport叫做ideal viewport，无论在什么样的设备上，都能匹配出完美、合适的文字大小以及图片大小。
所有的iphone的ideal viewport宽度都是320px。
三、meta标签
1. meta标签的作用：
- meta里的数据告诉浏览器如何解析页面；
- 可以发送数据到http请求的headers里面。
2. 如何利用meta来得到一个理想的viewport
- meta标签可以用来设置viewport，移动端的viewport默认是layout viewport，利用meta标签来实现ideal viewport的效果;
- meta viewport常用属性：
| 属性名 | 作用 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，可以用字符串”device-width”表示设备宽度 |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，很少使用，因为会随着width属性自动调整 |
| user-scalable | 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许 |
- 目前被认为最有效写法是：
<meta name="viewport" content="width=device-width, initial-scale=1">，分析：- 想要得到ideal viewport，首先想到是的屏幕宽度设置，把默认的layout viewport宽度设为移动设备的宽度，即
<meta name="viewport" content="width=device-width">，就能把当前viewport的宽度变为理想的ideal viewport宽度。但这样做有一个缺陷，在iphone或者ipad上，不管当屏幕变为横屏还是者竖屏时，宽度都是即定的竖屏时ideal viewport的宽度； - 其实以上效果这样写也行：
<meta name="viewport" content="initial-scale=1">，initial-scale=1设置页面初始大小为原始页面大小。需要确认一件事，缩放是相对于ideal viewport来进行缩放的，效果也就等同于content="width=device-width"。这样写的缺陷是windows phone 上的IE，不管当屏幕变为横屏还是者竖屏时，宽度都是即定的竖屏时ideal viewport的宽度。 - 综上得到最终方案：
<meta name="viewport" content="width=device-width, initial-scale=1">，initial-scale=1可以iphone、ipad上的缺陷，width=device-width可以解决IE上的缺陷。
- 想要得到ideal viewport，首先想到是的屏幕宽度设置，把默认的layout viewport宽度设为移动设备的宽度，即
<meta name="viewport" content="width=device-width, initial-scale=1">
