viewport深入理解

前面总结了一下viewport和px（屏幕分辨率）之间的关系， 现在来深入理解一下viewport

1、css中的1px不等于设备的1px

　　如之前说的在分辨率高的但是尺寸一样的屏幕上， 如i3的320×480， 1px=1像素， i4的640×960， 1px=2物理像素

　　影响css中px的变化： 用户缩放， 用户把页面放大一倍， 1px=2倍原始物理像素； 把页面缩小一倍， 1px= 1/2倍原始物理像素

 

2、三个viewport

　　layout viewport： 浏览器默认的viewport（980/1024，一般大于可视宽度） 通过document.documentElement.clientWidth获取（IE则是document.body.clientWidth）

　　visual viewport： 浏览器的可视区域的宽度 通过window.innerWidth（IE通过document.documentElement.clientWidth）

　　ideal viewport：  移动设备的理想viewport， （如一段14px的文字在任何屏幕的分辨率下显示的大小都差不多）

总结： 我们要做的就是把元素的宽度设置为ideal viewport的宽度， 这个元素的宽度就是设备的宽度， 达到宽度100%的效果， 就是我们为什么按照640/320 来适配移动段页面了

 

3、meta标签对viewport进行控制

我们开发时候需要得到的ideal viewport就是通过meta标签得到

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

上面这句话把layout viewport设置为ideal viewport

4、在iphone上面指定指定layout viewport或又没有指定initial-scale的话， 它会自动计算initial的值， 保证当前layout viewport的宽度在缩放后是浏览器可视化的宽度

当前缩放值 = ideal viewport宽度  / visual viewport宽度

5、总结

　　1、如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值980px，1024px等 ，是大于屏幕宽度的。 这里的宽度所用的单位px都是指css中的px， 它跟代表实际屏幕物理像素的px不是一回事

　　2、每个移动设备浏览器中都有一个ideal viewport，这个理想的宽度是指css中的宽度（我们适配的宽度），跟设备的物理宽度没有关系，我们可以用meta标签把viewport的宽度设为那个理想的宽度， 用 device-width这个特殊值，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

　　meta name="viewport" content="width=device-width, initial-scale=1">

 

参考：

　　　移动前端开发之viewport的深入理解 http://www.cnblogs.com/2050/p/3877280.html