Viewport

一、分辨率

在搞清楚Viewport之前，首先要弄清分辨率。

物理分辨率：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。这都是针对显示屏幕来说的。

二、手持设备的布局（以iPhone4为例）

三、Viewport

pc和ios上的Viewport是不同的，当网页尺寸大于Viewport时，pc端会有水平和垂直滚动条，如3.1，而ios端是没有的。

所以这里的Viewport是网页提供给用户的视野窗口。而对于iOS就是通过双击以及网页移动来调整可视的内容。

图3.1

1、PC端的Viewport

Viewport在PC端就是可视区域的大小。用户可以通过调整窗口的大小来调整可视区域的大小，进而调整Viewport的大小。

2、IOS网页端的Viewport

ios端网页的Viewport是由加载内容的方式以及文本环绕的位置决定的，所以这个Viewport可以比这个可视区域大或者小。

用户可以使用双击、放大缩小，来改变Viewport的比例，但是不能改变Viewport的尺寸。如下为例：

这里要区分一下：物理分辨率跟屏幕尺寸是不一样的，屏幕尺寸是出厂后固定的，物理分辨率是最大可呈现在屏幕上的像素点。

3、Viewport的设置

如果给Viewport设置一个定值，当你的应用换到另一个设备时，小于该Viewport时，会出现可视区域小于网页，当大于Viewport时，会出现可视区域大于Viewport，所以一般设置为：Viewport的尺寸为手持设备的分辨率即可。Viewport的设置要使用meta标签：

<meta name="viewport" content="width=device-width">

Viewport语法：

<!-- html document --> <meta name="viewport"     content="         height = [pixel_value | device-height] ,         width = [pixel_value | device-width ] ,         initial-scale = float_value ,         minimum-scale = float_value ,         maximum-scale = float_value ,         user-scalable = [yes | no] ,         target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]     " />

width

控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height

和 width 相对应，指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

参考网址：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html