标签：
原文链接：A tale of two viewports — part two
在这个迷你系列中，我将解释viewports和各种重要元素的宽度是如何工作的，比如说<html>元素，窗口以及屏幕。
我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。
手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后文字太小无法阅读，要么放大后只能看到网站的一部分。
手机屏幕远小于桌面屏幕，最大宽度也就400px甚至更小（有些手机据称有更大的宽度，那是骗人的，或者至少给我们的是无用的信息）。
平板设备如ipad以及传闻基于webOs的惠普产品将缩小桌面与手机的差距，但也无法改变最基本的问题。因为网站也需要在移动端显示，所以我们必须让它们在小屏幕上正常显示。
最重要的问题与CSS有关，尤其视图的尺寸。如果我们一比一的复制桌面模型，CSS可能不会正常工作。
将侧边栏设置为width:10%。如果移动浏览器和桌面浏览器的工作原理相同，侧边栏至多显示40px宽，确实太窄了。你的自适应布局看上去被压扁了。
解决这个问题的方法之一就是为移动浏览器设计特殊的网站。除了你是否应该这样做的问题之外，实际的问题是只有很少的网络公司会为移动单独设计网站。
手机浏览器的供应商希望为客户提供最好的用户体验，这意味着“尽可能如桌面显示的一样”。因此必须使用一些小花招。
所以视图太窄而不能作为你CSS布局的基础。很明显解决方式就是让视图更宽一点，我们要将视图分为两部分：视觉视图和布局视图。
George Cummins在Stack Overflow上很好的解释了视图的基本概念，“把布局视图想象成一张无法改变大小和形状的很大的图片，你可以通过一个很小的相框来看这张图片。这个小相框的周围是不透明的材料，你只能看到相框内的图片。你从相框内看到的图片就是视觉视图。你可以拿着你的相框远离图片来看整张图片（缩小），或者离近一点只看图片的一部分（放大）。你也可以改变相框的角度，但是图片（视觉视图）的大小和尺寸不会变。”
视觉视图是页面的一部分，如下所示。用户可以通过滚动来查看页面，或者通过缩放改变视觉视口的大小。
CSS的布局是根据布局视图计算的，所以比视觉视图更宽。
由于<html>元素首先获取布局视图的尺寸，所以CSS被编译后页面就会比手机屏幕宽。这使得你的网站和在桌面浏览器中显示的一样。
布局视图有多宽呢？不同的浏览器各有差异。Safari/980px，Opera/850px，Android Webkit/800px，IE/974px。
还有一些浏览器比较特殊：。。。
很明显，两种视图都是用CSS像素测算。当视觉视图通过缩放改变时（如果是放大，屏幕上的CSS像素会变少），布局视图的尺寸不会变。（如果变化了，你的页面会用百分比的宽度被重新计算）
为了理解布局视图的尺寸，我们应该看一下页面被完全缩小后发生了什么。大多数手机浏览器默认以完全缩小模式显示页面。
关键的一点是：布局视图在缩小模式下能够完全显示在屏幕上。（此时视觉视图等于布局视图）
如下图，布局视图的宽高与完全缩小模式下的宽高是相同的。当用户放大后，这些尺寸仍然相同。
布局视图的宽度始终相同。如果你旋转手机，视觉视图会发生改变，但是浏览器会放大布局视图来适应新的方向，所以布局视图和视觉视图的宽度仍然相等。
这会对布局视图的高度产生影响，纵向模式下布局视图的高度小于实际高度。但是网页开发者不关心高度，只关心宽度。
标签：
原文地址：http://www.cnblogs.com/nzbin/p/5721743.html
