viewport相关的几个概念
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> device pixel和css pixel
前者是物理的，后者是逻辑的。
device pixel是设备的像素/分辨率，通过screen.width/height可以取到。
而我们为特定元素指定的width:24px，这样的像素则是css pixel。
在浏览器未缩放时（100%显示），两个像素大小相等。如果放大，则css pixel的面积会变大（比如200%时，1个css pixel包含4个device pixel）。
screen size和window size
screen size是显示屏大小。
window size是浏览器的client区大小（window.innerWidth 和window.innerHeight）。
桌面浏览器的viewport
桌面浏览器的viewport size等于window size（可视区域大小）。
就是说viewport的物理大小是确定的，所以缩放的话，viewport的css pixel size实际上是变化的。
比如下面的代码，blue元素（width:100%），继承了viewport的size；red元素（width:1200px）固定为1200 css pixel。结果blue元素在缩放时css pixel大小是变化的。
<html>
<head>
<script type="text/javascript">
function show()
{
alert('blueblue.width=' + document.getElementById('blue').clientWidth);
alert('redred.width=' + document.getElementById('red').clientWidth);
}
</script>
</head>
<body>
<div id="blue" style="background-color:blue;width:100%;">
<input type="button" value="show" onclick="show();" >
</div>
<div id="red" style="background-color:red;width:1200px;">
test
</div>
</body>
</html> 移动浏览器的viewport
按照quirksmode上的说法，移动浏览器上有两种概念的viewport。一个layout viewport，一个visual viewport。visual viewport是可视区域的viewport，分横竖两种。layout viewport跟桌面版的有些类似。
移动浏览器load页面的过程，大概可以理解成：移动浏览器会先按照桌面浏览器那样，把layout布局好，然后再框上一个visual viewport供用户查看其中一部分。portrait和landscape的切换，只会导致visual viewport的变化，而layout viewport不会重新计算。
移动浏览器的layout viewport根据不同厂家而不同，不过值貌似是固定的，宽800px到1000px不等。显然这个数字比device pixel的320px要大得多，所以实际显示出来内容就很小了，但是layout的话跟desktop上的差别并不大。
meta viewport语句
可以调整layout viewport。会继承此viewport的width，然后开始布局。
过程的话，貌似和桌面浏览器把宽度拉到320px之后的效果一样。
如果桌面浏览器把宽度拉到320px之后仍能够正常显示，那移动设备上应该可以正常显示吧。
sacle指的是缩放比例，即layout viewport和visual viewport的对应关系。user-scalable:用户是否可以手动缩放。
dpi
Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
听起来针对不同dpi的设备，只需要处理好图片就可以了。
参考文档：
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag