我们知道，桌面版浏览器只有一个视口，这个视口就是浏览器主窗口区域（显示网页内容的区域）。这个视口也是CSS布局中的初始包含块，所有布局最终都是相对于初始包含块，即这个视口。

手机浏览器却有3个视口：布局视口（layout viewport）、可视视口（visual viewport）和理想视口（ideal viewport）。而出现3个视口的原因要从前智能手机时代开始说起。

前智能手机时代的网站设计

在智能手机出现之前，屏幕分辨率碎片化并不像现在这么严重，而且以1024*768的居多，网站设计主要采用固定宽度布局，而其中又以960像素宽为主，960 Grid System就是那个时代的代表之一。

为兼容和最佳体验而生的3个视口

当乔帮主重新发明手机后，手机浏览器需要解决的一个重要问题就是如何在小屏幕（320像素宽）上显示为桌面浏览器优化设计的页面（960像素宽为主）。因为直接在小屏幕上显示这些页面，会使页面难以查看，体验很差。

布局视口

最终的解决方案是引入一个布局视口，用作CSS布局时计算的参考和限制，布局视口的宽度从768像素到1024像素不等，主流宽度为980像素宽。

在渲染页面时，页面首先在布局视口中进行布局，然后缩小页面以在浏览器中显示整个页面，让用户查看整个页面的全貌，然后让用户在浏览页面过程中通过缩放和滑动页面来查看页面的不同部分。

可视视口

用户在查看页面时，任意时刻只能看到页面的一部分，同时一些CSS属性是针对用户看到的内容的，于是引入可视视口来是表示用户看到的那部分页面。可视视口默认宽度为屏幕宽度（像素值），用户缩放会改变可视视口的尺寸。注意，缩放不会改变布局视口的尺寸，只会改变可视视口的尺寸。

结合布局视口和可视视口，我们可以看出，用户在手机浏览器上查看网页的过程就是缩放和滑动可视视口，显示布局视口不同部分内容的过程。就像使用放大镜看书，书相当于布局视口，放大镜相当于可视视口；调整放大镜到书的距离可以改变看到的内容的数量，这相当于缩放页面；移动放大镜可以查看书上不同的内容，这相当于滑动页面。

理想视口

两个视口似乎很好地解决了显示页面的问题，为什么还会有第3个视口呢？

我们再想一想就会意识到问题所在，布局视口的默认宽度从768像素到1024像素不等，而可视视口的宽度默认为屏幕宽度，这就导致了用户在查看页面时需要通过缩放和滑动页面来查看页面的不同部分，这很好地解决了显示为桌面浏览器优化的页面的问题，但是体验并不好。

为了设计并构建出更适合在手机浏览器上查看的页面，又引入了理想视口。理想视口指布局视口在一个设备上的最佳尺寸。理想视口下的页面具有便于浏览和阅读的最佳宽度，不需要缩放就可以很好地查看页面。

理想视口是为构建为手机浏览器优化的页面而添加的，所以只有在为手机优化的页面才能使用理想视口。使用理想视口通过在页面中添加下面的视口元标签实现。

1
<meta name="viewport" content="width=device-width" />

上面的视口元标签就告诉手机浏览器使用理想视口的宽度作为布局视口的宽度。

不同设备上的不同手机浏览器的理想视口的尺寸差别很大，但是我们并不需要过多地去关注这些细节，因为我们需要使用理想视口时，只需要使用上面的视口元标签就可以了。

小结

在智能手机出现之前，网站设计以固定宽度布局为主。

当智能手机出现后，为了解决如何在手机浏览器上显示这些为桌面浏览器优化的页面的问题，引入了布局视口和可视视口。布局视口用于页面布局，可视视口用于显示用户看到的内容。

为了设计并构建出更适合在手机浏览器上查看的页面又引入了理想视口，用来设置布局视口的最佳宽度。理想视口通过在页面中添加视口元标签实现，只有为手机浏览器优化的页面才能使用理想视口。

从上面的分析我们也可以看出，视口概念背后是一系列用于确定最终如何布局、渲染和显示页面的算法。视口的概念使得它们更形象、更易于说明和交流。