web移动开发之视口viewport

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

PC 设备
在 PC 设备上 viewport 的大小取决于浏览器窗口的大小，以 CSS 像素做为度量单位。
我们都能理解的大小是会影响到网页布局的，而 viewport 又决定了的大小，所以 viewport 间接的决定并影响了网页的布局。

// 获取 viewport 的大小
document.documentElement.clientWidth;
document.documentElement.clientHeight;

移动设备
在移动设备上 viewport 不再受限于浏览器的窗口，而是允许开发人员自由设置 viewport 的大小，通常浏览 器会设置一个默认大小的 viewport，为了能够正常显示那些专为 PC 设计的网页，一般这个值的大小会大于屏幕的尺寸

屏幕适配
过分析我们得到，移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置来进行控制，并改变浏览器默认的 layout viewport 的宽度。

Viewport 详解
移动开发的核心是屏幕适配，然而并示有专门的规范进行约束，一般是对现有持术进行归纳而总结出适配方案，掌握了以上的技术细节后我们可以总结出以下几种适配方案：
1、设置
2、设置内容区域大小为 320px
3、设置内容区域水平居中显示
关于手机尺寸（ideal viewport）

通过汇总对比我们知道移动设备的屏幕尺寸虽然庞杂，但有几个主要尺寸，分别为 320px、360px，这三个尺寸占了绝大部分，并且以 320px 最多，所以我们移动网页如果设计成 320px 宽，则可以保证在绝大多数设备里正常显示，此方案已经很少采用了。