一、viewport的概念
浏览器的 viewport 是可以看到Web内容的窗口区域，通常与渲染出的页面的大小不同，这种情况下，浏览器会提供滚动条以滚动访问所有内容。
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
一般来讲说，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
二、viewport基础
一个典型的针对移动端优化的站点包含类似下面的内容：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
** width** 属性控制视口的宽度。可以像width=600这样设为确切的像素数，或者设为device-width 特殊值，代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。（相应的也有height及device-height属性，可能对包含基于视口高度调整大小及位置的元素的页面有用。）
** initial-scale ** 属性控制页面最初加载时的缩放等级。** maximum-scale 、 minimum-scale 及 user-scalable ** 属性控制允许用户以怎样的方式放大或缩小页面。
但是使用 user-scalable=no 会导致可访问性问题，让有视觉障碍（如视力差）的用户使用困难。
三、像素并非像素
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。
对于Web开发人员，这意味着页面的大小远小于实际像素数，浏览器可能会相应地调整其布局和图像的大小。不过要记得不是所有移动设备的宽度都一样，你应该确保你的页面在不同屏幕尺寸和不同方向上都能很好地显示。
默认比例依赖于显示密度。在密度低于200 dpi的显示设备上，比例为1.0。在密度介于200及300 dpi之间的显示设备上，比例为1.5。对于具有300 dpi以上密度的显示设备，比例为密度除以 150 dpi 后向下取整的结果。注意，只有在视口比例为1时，默认比例才会生效。否则，CSS 像素（即像素单位）与设备像素之间的关系依赖于当前的缩放等级。
视口宽度及屏幕宽度
网站可以将其视口设置为特定大小。例如，定义 "width=320，initial-scale=1" 可在纵向的小手机屏幕上精确显示。但这样一来浏览器就不会渲染大尺寸页面，从而导致问题。为解决此问题，浏览器将根据需要扩展视口宽度，以按要求的比例填充屏幕，在iPad等大屏幕设备上尤其有用。
对于设置了初始或最大缩放的页面，width属性实际上变成了最小视口宽度。比如，如果你的布局需要至少500像素的宽度，那么你可以使用以下标记。当屏幕宽度大于500像素时，浏览器会扩展视口（而不是放大页面）来适应屏幕：
<meta name="viewport" content="width=500, initial-scale=1">
可用属性还有 minimum-scale、 maximum-scale 和 user-scalable。这些属性会影响初始尺寸及宽度，并且会限制缩放等级。
移动浏览器在处理屏幕方向改变时稍有差异。例如，Mobile Safari通常在竖屏转横屏时只缩放页面，而不会把页面重新布局成横屏载入时的效果。
