【原文地址】：www.quirksmode.org/mobile/view…
——此系列将介绍viewports以及html元素、window、screen对象中widths的工作机制
本篇将讨论mobile浏览器。如果你是mobile端新手，我建议你先阅读本系列的第一篇关于PC浏览器的介绍。
一 Mobile浏览器的问题
对比PC浏览器和移动端浏览器，最明显的区别是屏幕尺寸。无论是缩小文字到难以阅读还是为了适应屏幕只显示网站的一小部分，优化后的网站在移动浏览器上展示会比PC端小得多。
移动端屏幕比PC端屏幕小很多：假定屏幕最大宽度是400px，通常比这个小。
平板电脑设备比如iPad可以作为连接PC和移动端的桥梁，但是屏幕尺寸问题依然存在。网站必须在移动设备上运行，因此要让它们展示在小屏幕上。
重点在于CSS，特别是viewport的尺寸。如果我们只是简单地将PC端的布局模型简单拷贝到移动端，CSS将会混乱得一塌糊涂。
回到之前的10%工具栏的例子。如果移动端浏览器也和PC浏览器一样的运行机制的话，元素的尺寸将会是最大宽40px，这太窄了。流排版将会看起来被压扁了。
解决此问题的一个办法就是为mobile浏览器创建一个新站点。且不说是不是应该这么干，实际上很少有网站所有者愿意为兼容移动端提供支持。
移动端浏览器厂商想要给他们的客户最好的体验，这就是意味着：尽可能与PC一样。因此，一些技巧就派上用场了。
二 2种viewport
对于CSS布局来说，viewport太窄了。显然解决办法就是让viewport变宽。这就出现了：可视视口和布局视口。
George Cummins关于这个基本概念的解释——
“可以把布局视口想象成一张不会改变尺寸和形状的大图，现在通过一个小一点的相框看这张大图。这个小相框是不透明的材料做成的，它阻挡了你看大图其它的部分。通过此相框你可以看见的那张部分大图就是可视视口。拿着相框后退，你就可以看见整张大图（缩小）；或者你靠近一点，就只能看见大图的更小部分（放大）。你还可以改变相框的方向，但是大图（布局视口）的尺寸和形状不会有任何改变”
Chris关于这两个概念的解释——
”可视视口即为屏幕上正在展示的那部分页面；用户可能会滚动改变他看的页面（改变可视视口的位置），或者缩放来改变可视视口的大小“。
CSS布局，特别是百分比宽度，是相对于布局视口计算的，布局视口比可视视口宽。
因此html元素从布局视口继承宽度，即使屏幕比手机屏幕大，CSS也是这样子解析的。这一点使得站点的布局与PC端保持一致。
那布局视口的宽度是多少呢？因浏览器而异。 Safari iPhone 是980px Opera 850px, Android WebKit 800px, and IE 974px。
三 缩放
以上2中视口都是以CSS像素计算的。当可是视口因缩放而改变，布局视口的尺寸依然不变
四 关于布局视口的理解
为了理解布局视口，我们首先需要看一下当页面完全缩小时发什么了什么。很多mobile浏览器在页面初始化时就是采用了最大化缩小模式展示。
关键在于：在最大化缩小模式下浏览器将布局视口大小完全平铺可视视口（此时布局视口与可视视口相等）
因此，在最大化缩小模式下，布局视口的宽度和高度就等于屏幕上可见部分。当用户放大时，比例将保持不变。
布局视口的宽度一直保持不变。如果手机横屏，可视视口将改变，浏览器将会通过稍微的放大以此来适用此时的新方向，此时布局视口将与可视视口一样宽。
而布局视口的高目前明显比竖屏模式少。开发者不关注高度，只关注宽度。
五 布局视口指标
现在需要测量两个视口。幸运的是，浏览器之争留给了我们两对属性。
document.documentElement.clientWidth 和-Height 布局视口
六 可视视口指标
window.innerWidth/Height
七 屏幕
PC端， screen.width/height以设备物理像素标明了设备尺寸。在PC端无需关心，但现在CSS像素将需要与它适配。
八 缩放级别
无法直接得到缩放级别，但可以通过 screen.width/window.innerWidth计算得到（只有属性都支持时才能计算得出）。其实缩放级别不是很重要。你需要关注的是：多少CSS像素适配了屏幕。
九 滚动偏移
需要关注可视视口与布局视口的相对位置。这就是滚动偏移，在PC端，用window.pageX/YOffset表示。
十 html元素
PC端，document.documentElement.offsetWidth/Height表示html的尺寸，CSS像素为单位
十一 媒体查询
与PC端一样，
width/height-->documentElement.clientWidth/Height 布局视口宽高
device-width/device-height --> screen.width/height 设备物理宽高，物理像素
以上指标哪个比较重要呢？我想很难说，如果非要说一个，应该是device-width 比较重要的一个了。因为它代表了可能会用到的设备的信息。例如 ，可能需要针对不同设备宽度来设计不同的布局——虽然可用meta viewport来适配。—— 用device-width媒体查询并不是唯一的解决方案。
对媒体查询来说，width比较重要？可能吧，毕竟它为浏览器厂商为设备的完美宽度提供了线索。但，这个信息是很模糊不清的，width媒体查询没有提供其它任何信息。现在我大概认为媒体查询对于分清你是在PC、平板、还是移动手机上有帮助，但它对于分清市面上各种各样的平板和移动手机并没有什么用处。
十二 事件坐标
PC端事件坐标或多或少用了些。不幸的是，在测试过的12款浏览器中只有Symbian WebKit 和 Iris 中的三组坐标运行良好，其它的浏览器或多或少都存在问题。
pageX/Y——相对布局视口，CSS像素，最重要的指标。
clientX/Y——相对可视视口，CSS像素
screenX/Y——相对屏幕，设备物理像素，不常用
十三 Meta viewport
最后，讨论 <meta name="viewport" content="width=320">标签，最初由Apple发明，后来被各大浏览器厂商效仿。它用于调整布局视口的大小。为弄清楚为什么要调整布局视口的大小，我们回顾一下之前的例子。
假如开发了一个没有设置宽度的简单页面，它的宽度为100%布局视口宽。大部分浏览器会缩小以便可以展示出整个布局视口，效果如下：
（可以看到文字小，难以阅读）用户都会立即放大操作，而浏览器都会保持元素原有的宽度，这将使得文字难以阅读。
可以尝试着将html的宽度设置为320px。现在html元素缩小，其它元素也跟着缩小，现在html元素为100%的320px。当用户在放大时这样子是行得通的，但页面初始化时并不行。当用户看到一个缩小的页面时大部分内容都是空白的。
为了解决这个问题，Apple发明了meta viewport 标签。当设置<meta name="viewport" content="width=320">就将布局视口的宽度设为了320px。现在页面的初始化状态就是正确的了。
你可以为布局视口、device-width设置任意尺寸。device-width引用了screen.width（设备像素单位）并且可以相应地调整布局视口的尺寸。
坑的是，有时候像素太高了导致screen.width没有多大用处。例如：Nexus One的标准宽度是480px,但谷歌工程师认为使用device-width时，将布局视口设为480px太宽了。于是将它减少到2/3，因此，device-width是320px,iPhone也是如此。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
