视口

在CSS标准文档中，视口 viewport 被称为初始包含块。

这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。

简单来讲，视口（viewport）是用来约束网站中最顶级元素html的，它决定了html的大小。

在桌面上，视口的宽度和浏览器窗口的宽度一致。如果改变视口的大小，会影响页面的布局，主要有以下 3 种情况：

• 如果父元素确定具体的宽高值，当超出viewport的大小时，会出现滚动条；
• 如果父元素设置的宽度为100%，当子元素宽高大于父容器的时候，会自动换行；
• 如果不想出现滚动条或换行，可以将子元素设置为父容器的百分比，但可能造成内容溢出。

而在移动端，视口分为：布局视口、视觉视口和理想视口。

布局视口  Layout Viewport

移动端设备的问题是，如果使视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。移动端浏览器通常的宽度是240到640像素，且大多数设计给桌面的网站的宽度至少是800px，因此网站内容在手机上看起来会非常窄。

在手机上，视口与移动端浏览器屏幕宽度不再相关联，而是完全独立的，我们称为布局视口。

// CSS布局会根据它来计算，并被它约束。

为容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度：

   document.documentElement.clientWidth/Height返回的是布局视口的尺寸。

视觉视口  Visual Viewport

虽然独立布局视口的创造很大程度地帮助了桌面网站到手机上的转移，但我们不能完全无视移动端设备的屏幕尺寸。一些CSS声明与用户见到的东西有关，而与CSS的初始包含块无关。并且，有时候知道用户看到了网站的哪些部分对web开发者会有帮助。视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height。

// 安卓webkit2和代理浏览器存在兼容问题

缩放会影响视觉视口的大小。当缩放程度是100%时，视觉视口与设备屏幕一样宽。

放大使视觉视口变得更小，因为屏幕上显示的CSS像素更小了，而缩小反之。

因此缩放程度和视觉视口的大小是逆相关的：放得越大，视觉视口越小。

当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变。移动端的缩放不会导致CSS布局被重新计算。

由于手机上经常发生缩放，且手机的处理器工作很慢，电池消耗快，因此不重新布局对性能来说有很大的好处。

理想视口  Ideal Viewport

默认情况下，一个手机或平板浏览器的布局宽度是980或1024像素。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对于手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站。

换句话说，布局视口的默认宽度并不是一个理想的宽度。这就是为什么苹果和其他效仿苹果的浏览器厂商，会引进理想视口。它是对设备来说，最理想的布局视口尺寸。显示在理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时也不再需要缩放。

只有当网站是为手机准备的时候才应该使用理想视口。只有主动地往页面里添加meta视口标签时理想视口才会生效。

如果没有meta视口标签声明，布局视口将会维持默认宽度，理想视口只有当显式地使用时候才会产生影响。

//  这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致

    <meta name="device" content="width=device-width">

定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。

例如，三星galaxy pocket上的安卓webkit的理想视口是320*427px，而opera mobile12的则是240*320px。

但是，浏览器的理想视口的大小也取决于它所处的设备。三星galaxy s4上的chrome的理想视口是360*640px，但是在nexus7上，则是601*962px。原因很明显：Nexus7是一个平板，它拥有更宽的屏幕，因此理想视口也应该更宽。

screen.width/height返回是理想视口的尺寸。

当设备方向改变时，iphone中理想视口screen.width/height的值并不会改变，但安卓设备会改变。
而布局视口document.documentElement.clientWidth和视觉视口window.innerWidth的值，苹果和安卓都会改变。