两个视口（layout viewport &visual viewport）
因此视口太窄，不能作为CSS布局的基础。显而易见的解决办法是扩大视口。然而，这要求将其分为两个部分：可视视图和布局视图。
George Cummins 在 Stack Overflow上解释了 可视视图 和 布局视图 的基本概念：
布局视图 就像一个大小形状固定的大图像。可视视口就像你手里拿着一个不透明遮挡你部分视线只留有一个口供你去看大图像的框，你拿着这个框去查看这个大图像。通过框可以看到的大图像的部分是可视视图。
你可以拿着这个框向后退直到能看到整个大图像，或者拿着框向大图像靠近只看到大图像的一部分。
你也可以改变框的方向，但是整个过程中大图像（布局视图）的大小和形状都不会改变。
原文：Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
可视视图是当前显示在屏幕上的页面的一部分.用户可以滚动以更改他看到的页面的其它部分，或者缩放以更改可视视图的大小。（The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.）
然而，在CSS布局中，特别是百分比宽度的计算，百分比计算是相对布局视口计算的，很显然布局视口会比可视视口宽很多。
因此，<html>元素最初采用布局视图的宽度，显然，此时CSS解释后的页面会比手机屏幕宽得多。这也确保了网页布局与桌面浏览器上的布局相同。
布局视口有多宽？每个浏览器都不一样。Safari iPhone使用980px、Opera 850px、Android WebKit 800px、IE974px。
有些浏览器有特殊行为：
- SymbianWe bKit 试图让 布局视口 与 视觉视口 相等，这意味着具有百分比宽度的元素可能会表现得很奇怪。但是，如果由于绝对宽度使视觉视口无法容下页面，浏览器会将布局视口扩展到最大的850px。
- Samsung WebKit 会使布局视图与最宽的元素一样宽。
- 在BlackBerry中，布局视口等于在100%缩放时的可视视口。
显然，两个视口均以CSS像素为单位。可视视口的尺寸随着缩放而变化（如果放大，则屏幕上可容纳的CSS像素更少），而布局视口的尺寸保持不变。
理解布局视口（layout viewport）
为了了解布局视口的大小，我们必须查看页面完全缩小时会发生什么。许多移动浏览器最初会以完全缩小的模式显示任何页面。
关键是：浏览器已经选择了布局视口的尺寸，以使 其 在完全缩小的模式下 页面能够完全显示在屏幕中（因此，此时 布局视口等于视觉视口）。
因此，布局视口的宽度和高度等于 在最大缩小模式下 屏幕上可以完全显示网页内容时的尺寸。当用户放大时，布局视口的宽度始终保持不变。
红色框 是 visual viewport，用户看见的区域。
蓝色框 是 layout viewport，用户缩放屏幕蓝色框大小始终不变。
（在线演示Visual vs. Layout Viewport Demo）
如果旋转手机，则可视视口会发生变化，浏览器也会稍微放大来适应此新方向，以使布局视口再次与可视视口一样宽。这会影响布局视口的高度，该高度现在大大小于纵向模式下的高度。但是网络开发人员并不关心高度，而只关心宽度。
document.documentation.clientwth/clientHeight包含布局视口的尺寸，单位是CSS像素。
当然不同设备对该属性的支持不同：
- 在Samsung WebKit中，当页面应用
<meta viewport>标记 时，返回值正确；否则，用的是<HTML>元素的尺寸。 - 在Firefox中用的屙屎屏幕尺寸。
- IE通过
document.body.clientWidth/Height访问。 - 蓝莓不支持这对方法。
测量视觉视口（visual viewport）
至于视觉视口，它是通过window.innerWidth / Height测量的，单位是CSS像素。显然，当用户放大或缩小时，尺寸会发生变化，因为屏幕上会容纳更多或更少的CSS像素。
不幸的是，这是一个不兼容的领域。许多浏览器仍然必须添加对可视视口的测量的支持。
仍然没有浏览器将此度量存储在任何其他属性对中，因此我猜window.innerWidth / innerHeight是一个标准，尽管支持不佳。
屏幕（screen）
与桌面一样，screen.width/height以设备像素为单位给出屏幕大小。平时开发对屏幕的物理大小用的不多，但对屏幕中能容下多少CSS像素感兴趣。
缩放级别（The zoom level）
缩放级别无法直接读取，但可以用 screen.width 除以 window.innerWidth 来获得它。当然，只有在完全支持这两个属性的情况下才可以这么做。幸运的是，缩放级别并不重要。大多数时候需要知道的是，当前屏幕能容下多少CSS像素。可以通过 window.innerWidth 屏幕能容纳的CSS像素数。
不同设备对该属性的支持不同：
- Opera和Firefox在返回屏幕宽度，单位是设备像素。
- Android, Bolt, MicroB, and NetFront返回布局视口的尺寸。
- IE通过
document.documentElement.offsetWidth/offsetHeight访问。 - Samsung WebKit要么返回布局视口的尺寸，要么返回
<HTML>元素的尺寸，取决于页面中是否添加了<meta viewport>标签。
滚动偏移量（Scrolling offset）
可视视图相对于布局视图的位置偏移量就是滚动偏移量，就像在桌面上一样，它存储在window.pageXoffset/pageYoffset中。
元素
和PC端一样，document.documentElement.offsetWidth/offsetHigh给出了元素的总大小(以CSS像素为单位)。
Media queries
和PC端一样，width/height 使用 布局视图 作为参考，以CSS像素作为单位，device-width/height 使用设备屏幕作为参考，以设备像素度量。 width/height使用 document. documentElement. clientWidth/Height的值，device-width/height使用screen.width/height的值。
哪种度量对我们的web开发人员更有用？重点是，我也不知道。
我一开始认为设备的宽度（device-width ）是最重要的，因为它给了我们一些关于所使用的设备的信息。例如，可以更改布局的宽度以适应设备的宽度。但是，我们也可以使用<meta viewport>标签来实现这一点；使用设备宽度媒体查询（device-width media query）并不是绝对必要的。
那么，宽度（width ）是否是更重要的媒体查询呢？也许吧；它提供了一些有关浏览器供应商认为此设备上的网站合适宽度的线索。但这是相当模糊的，宽度媒体查询实际上没有提供任何其他信息。
所以我不确定。目前，我认为媒体查询对于弄清您是台式机，平板电脑还是移动设备非常重要，但对于区分各种平板电脑或移动设备不是很有用。
事件坐标（Event coordinates）
事件坐标的工作与桌面差不多。不幸的是，在被测试的12个浏览器中，只有两个， SymbianWebKit 和 Iris 完全正确。所有其他浏览器或多或少都有严重的问题。
PageX/Y仍然是相对于页面的坐标，以CSS像素为单位。这是三个属性对中迄今为止最有用的一对属性，就像在桌面上一样。
clientX/Y相对于可视视图的坐标，以CSS像素为单位。这是有意义的，虽然我不完全确定它有什么好处。
screenX/Y相对于屏幕的坐标，以设备像素为单位。它与clientX/Y使用的参考相同，而且设备像素也是无用的。所以我们不需要担心`screenX/Y，因为它和在桌面中一样没用。
Meta viewport
最后，让我们讨论<meta name="viewport" content="width=320">；最初是由Apple扩展而来，后来被更多的浏览器效仿。它的目的是调整布局视图的大小。为了理解为什么这个meta标签是必要的，让我们后退一步。
假设您构建了一个简单的页面，并且不给元素任何宽度。现，它们可以拉伸以占据布局视口宽度的100％。大多数浏览器会缩小以在屏幕上显示整个布局视口，从而产生如下效果：
所有用户都将立即放大，这是可行的，但是大多数浏览器会将元素的宽度保持不变，这使得文本难以阅读。
（此处的主要例外是Android WebKit，它实际上减小了包含文本的元素的大小，以使其适合屏幕显示。这绝对是太棒了，我觉得所有其他浏览器都应该复制这种行为。
现在尝试设置html {width：320px}。现在<html>元素会缩小，所有其他元素也会随之缩小，这些元素现在占320px的100％，在用户放大时依然起作用。但在用户遇到放大后的页面时不起作用，该页面通常不包含任何内容。
为了解决这个问题，Apple发明了meta viewport标签。设置<meta name="viewport" content="width=320">时，将布局视口的宽度设置为320px。现在页面的初始状态也是正确的。
可以将布局视口的宽度设置为所需的任何尺寸，包括device-width。
最后一个以screen.width（以设备像素为单位）作为参考，并相应地调整布局视口的大小。
不过这里有个陷阱。有时候，形式上的屏幕宽度没有多大意义，因为像素数太高了。例如，Nexus One的正式宽度为480px，但是Google工程师决定使用设备宽度时给布局视口提供480px的宽度实在太多了。他们把它缩小到2/3 rds，这样设备宽度就可以达到320 px，就像在iphone上一样。
如果像传言说的那样，新iPhone的像素数会更大(这不一定等于大屏幕！)，如果苹果效仿这种行为，我也不会感到惊讶。也许最终设备宽度将意味着320 px。
5326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
