＃笔记＃ 移动前端开发之viewport

 

一般移动设备的浏览器都默认设置了一个 viewport ，并初始定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。下面我们来认识几个与 viewport 相关的名词：

 

layout viewport（布局视口）

布局视口是页面布局的实际宽度。iOS, Android基本都将这个视口初始设置为 980px。

• • 网页缩放比例（initial-scale）

CSS像素与设备逻辑像素的比例即为网页的缩放比例。如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。在ios下会根据当前设备自动计算缩放比例，使布局视口在缩放后刚好布置在视觉视口中，不会出现滚动条。

 

visual viewport（视觉视口）－物理像素

视觉视口是移动设备物理屏幕的可视区域，是屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。

 

ideal viewport（理想视口）－ dip（设备逻辑像素）

理想视口通常是我们说的屏幕显示的实际分辨率，设备逻辑像素的值就是理想视口的值。一个设备逻辑像素在任意像素密度的设备屏幕上都占据相同的空间（设备逻辑像素跟设备的硬件像素无关）。我们可以通过设置viewport标签让理想视口占满视觉视口。

 

设置方式：

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

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

 

 

参考：

“HTML5移动端开发中的Viewport标签及相关CSS用法解析” http://www.jb51.net/html5/451267.html

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