视口

视口可以理解为设备或文档对象的逻辑尺寸。
可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。

1，布局视口 layout viewport

布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。
在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。
由于历史原因，一些移动设备的浏览器具有默认的布局视口宽度（单位CSS像素）：

获取布局视口的DOM API：

 <script>
      console.log(document.documentElement.clientWidth)
  </script>

2、理想视口 ideal viewport!

理想视口是与设备相关的，是布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时（逻辑尺寸，即有多少个逻辑像素），才是理想视口，此时文档对象宽度与屏幕宽度相同。
移动设备一般具有固定的DPR，即在缩放100%时，用多少个物理像素显示一个逻辑像素，在Web开发中就是用多少个物理像素去显示一个CSS像素。

理想视口宽度 = 移动设备横向分辨率 / DPR
获取理想视口的DOM API：

  <script>
      console.log(window.screen.width);
  </script>

3、 视觉视口 visual viewport

用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
视觉视口的宽度 = 理想视口宽度 / 缩放比例

利用meta标签控制视口

移动设备的默认布局视口往往大于理想视口，此时就会在横向出现滚动条才能完整的容纳页面。我们需要的是将页面的布局视口设置为理想视口，这就改轮到meta标签出场了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该meta标签的作用是让layout viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让layout viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的布局视口默认值，也就是说会出现横向滚动条。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

meta viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width属性

width属性用于设置页面的布局视口宽度，属性值不带单位，默认单位为像素。
其默认值在不同浏览器中不同，但大多数为980。

initial-scale属性

initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。

width=device-width, initial-scale=1

目的：
让我们写的页面在水平方向上恰好与各个设备的屏幕严丝合缝，需要将页面布局视口设置为设备理想视口。

• 只设置width = device-width 苹果移动设备横屏时会有bug
• 只设置init-scale = 1 WP7系统IE浏览器横屏会有bug

终极方案：

将meta:vp标签的属性值设置为width=device-width, initial-scale=1就不仅能够将页面的布局视口自动设置为各个移动设备的理想视口，还能够同时兼容iphone、ipad的Safari以及WP7 IE浏览器的横屏问题。

meta-viewport标签中的width和initial-scale属性