在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layoutviewport)、视觉视口(visualviewport)和理想视口(idealviewport)
布局视口
移动端设备的问题是，如果使视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。移动端浏览器通常的宽度是240到640像素，且大多数设计给桌面的网站的宽度至少是800px。因此网站内容在手机上看起来会非常窄
在手机上，视口与移动端浏览器屏幕宽度不再相关联，而是完全独立的。我们称它为布局视口——CSS布局会根据它来计算，并被它约束
为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。视觉视口
虽然独立布局视口的创造很大程度地帮助了桌面网站到手机上的转移，但我们不能完全无视移动端设备的屏幕尺寸。一些CSS声明与用户见到的东西有关，而与CSS的初始包含块无关。并且，有时候知道用户看到了网站的哪些部分对web开发者会有帮助
视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height
安卓webkit2和代理浏览器存在兼容问题
缩放会影响视觉视口的大小。当缩放程度是100%时，视觉视口与设备屏幕一样宽。放大使视觉视口变得更小，因为屏幕上显示的CSS像素更小了，而缩小会让视觉视口更大，因为屏幕上的CSS像素更多了。因此缩放程度和视觉视口的大小是逆相关的：放得越大，视觉视口越小
以iphone5为例，浏览器布局视口的宽度默认是1024px，屏幕宽度只有640个设备像素，DPR为2，所以CSS像素是320px。现在用户从100%放大到200%，CSS像素被放大，直到屏幕上只有160个CSS像素。但是，布局视口仍然保持在1024px，所以页面中的元素并没有改变大小。
当用户缩放时，只有视觉视口的尺寸会发生改变，布局视口不会改变。移动端的缩放不会导致CSS布局被重新计算。由于在手机上会经常发生缩放，并且手机的处理器工作得很慢，电池消耗地很快，因此不重新进行布局对性能来说有很大的好处。
结束语：以上就是关于移动开发之视觉视口的全部内容，更多内容请关注学步园。