移动前端开发之viewport的理解--个人总结

一、概念
1、通俗：移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域（浏览器或者app用来显示网页的那部分区域）。在默认情况下，一般来说，移动设备上的viewport都要大于浏览器可视区域，因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或者其他，但会导致浏览器出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
2、补充：屏幕分辨率低时，在屏幕上显示的像素少，但尺寸比较大。屏幕分辨率高时，在屏幕上显示的像素多，但尺寸比较小。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

二、css中的1px并不等于设备的1px
1、在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素。但是css中的像素只是一个抽象的单位，不同的设备或环境，css中的1px所代表的设备物理像素是不同的。
2、devicePixelRatio属性
在移动端浏览器及某些桌面浏览器，window对象有一个devicePixelRatio属性，指设备物理像素和设备独立像素的比例，devicePixelRatio=物理像素/独立像素(css)。

三、ppk的关于三个viewport的理论
1、layout viewport
浏览器在默认情况下把viewport设为一个较宽的值（宽度大于浏览器可视区域的宽度），这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了
2、visual viewport
表示浏览器可视区域的大小，可通过window.innerWidth获取（部分不兼容）
3、ideal viewport
完美适配移动设备的viewport，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示文字的大小合适。
ideal viewport的宽度等于移动设备的屏幕宽度。

四、meta标签的使用

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

作用：让当前的viewport的宽度等于设备的宽度，同时不允许用户手动缩放

1. width：设置layout viewport 的宽度，为一个正整数，或字符串”device-width”（设置成字符串时，当前移动设备的屏幕宽度就是 ideal viewport）
2. initial-scale：设置页面的初始缩放值，为一个数字，可以带小数(设置成1的时候，当前移动设备屏幕的宽度就是ideal viewport，缩放是相对于 ideal viewport来进行缩放的，值为1，等于没有缩放)
3. minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
4. maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
5. height ：设置layout viewport 的高度，这个属性对我们并不重要，很少使用

6. user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

   五、动态改变meta viewport标签
   1、可以使用document.write来动态输出meta viewport标签

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

2、通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

参考：http://www.cnblogs.com/2050/p/3877280.html