web移动开发之视口viewport

视口 viewport

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

PC设备

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

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

移动设备

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

从图中统计我们得知不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。
移动设备上有2个viewport（为了方便讲解人为定义的），分别是layout viewport和ideal viewport。
1、layout viewport（布局视口）指的是我们可以进行网页布局区域的大小，同样是以CSS像素做为计量单位，可以通过下面方式获取

// 获取layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;

通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport（如IOS为980px），这个viewport实际指的是layout viewport。
2、ideal viewport（理想视口）设备屏幕区域，（以设备独立像素PT、DP做为单位）以CSS像素做为计量单位，其大小是不可能被改变，通过下面方式可以获取。

// 获取ideal viewport有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

理解两个viewport后我们来解释为什么网页会被缩放或出现水平滚动条，其原因在于移动设备浏览器会默认设置一个layout viewport，并且这个值会大于ideal viewport，那么我们也知道ideal viewport就是屏幕区域，layout viewport是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢？移动设备厂商认为将网页完整显示给用户才最合理，而不该出现滚动条，所以就将layout viewport进行了缩放，使其恰好完整显示在ideal viewport（屏幕）里，其缩放比例为ideal viewport / layout viewport

移动浏览器

移动端开发主要是针对IOS和Android两个操作系统平台的，除此之外还有Windows Phone。
移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器
系统浏览器：指跟随移动设备操作系统一起安装的浏览器。
应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。
第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等。
在IOS和Android操作系统上自带浏览器、应用内置浏览器都是基于Webkit内核的。
思考：移动端页面要达到什么效果才最合理？

屏幕适配

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

Viewport详解

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

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

百分比宽度

、设置
2、设置页面宽度为百分比
我们需要重新认识CSS里百分比的使用，见代码示例4-9.html
// 测试下列属性设置为百分比
width 参照父元素的宽度
height 参照父元素的高度
padding 参照父元素的宽度
border 不支持百分比设置
margin 参照父元素的宽度
我们发现这种方案最容易理解，但是在设置元素高度时有非常大的局限性。

rem单位

1、设置
2. 设置页面元素宽度单位为rem 或 em
注：此方案比较灵活，我们的案例将采用这种方案
关于em和rem:
em 相对长度单位，其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小例如 .box {font-size: 16px;}则 1em = 16px .box {font-size: 32px;} 则 1em = 32px，0.5em = 16px

rem 相对长度单位，其参照根元素(html)字号大小例如 html {font-size: 16px;} 则 1rem = 16px html {font-size: 32px;} 则 1rem = 32px，0.5rem = 16px

100%像素

1、设置网页宽度等于设备物理像素
2、设置初始化缩放比例（值为1 / window.devicePixelRatio）
淘宝针对iPhone设备采用的这种方案