移动开发--viewport

手机浏览器默认做了2件事情：

一、页面渲染在一个980px（ios，安卓可能有640px或1000多不等）的viewport。

二、缩放

为什么渲染时，要有viewport？

为了排版正确（980px的viewport），再进行缩放就能看的正确。

不用980px的排版： font-size为40px等于pc上12px同等物理大小，不规范。

1、window对象有一个devicePixelRatio属性，

它的官方的定义为：设备物理像素和设备独立像素的比例 dpr，也就是 devicePixelRatio（dpr） = 物理像素 / 独立像素。
css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。

2、这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

3、layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取

4、ideal viewport 所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，
理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。
当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport，
也就是第三个viewport——移动设备的理想viewport。

5、属性scale：缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候。

6、当前缩放值 = ideal viewport宽度 / visual viewport宽度 
scale =2时，1px的长度与2px一样