一、viewport概念

（1）移动端的viewport：

  • 就是设备的屏幕上用来显示我们的网页的那一块区域；
  • viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大（浏览器会出现横向滚动条），也可能比浏览器的可视区域要小。

（2）css中的1px并不是代表屏幕上的1px ：

  • 分辨率越大（物理像素），css中1px代表的物理像素就会越多（css像素是viewport的一个小方格）；
  • 手机屏幕的分辨率已经越来越高（物理像素），但屏幕尺寸却没有发生太大变化，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多 。

（3）物理像素和逻辑像素（清晰易懂）：
https://blog.csdn.net/zhouziyu2011/article/details/70176511

（4）布局视口layout viewport：

  • layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。

（5）理想视口 ideal viewport:

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

（6）视觉视口visual viewport

  • visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
  • 用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了；用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。不管用户如何缩放，都不会影响到布局视口的宽度。
  • 视觉视口的宽度 = 理想视口宽度 / 缩放比例

二、viewport具体用法

移动设备的默认布局视口往往大于理想视口，此时就会在横向出现滚动条才能完整的容纳页面。我们需要的是将页面的布局视口设置为理想视口，这就轮到meta标签出场了。 该meta标签的作用是让layout viewport的宽度等于设备的宽度，同时控制是否允许用户手动缩放。

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

6个属性值含义： 

  1. width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
  2. height：控制viewport的高度。height=device-height
  3. initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
  4. maximum-scale：允许用户缩放到的最大缩放比例。
  5. minimum-scale：允许用户缩放到的最小缩放比例。
  6. user-scaleable：是否允许用户缩放，可以传“yes”或“no”

（1）initial-scale属性

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

即：scale = 理想视口idealViewport / 视觉视口visualViewport
  • 当只指定initial-scale属性，而不设置width属性时，浏览器会将布局视口宽度设置为视觉视口宽度，以将页面正好铺满屏幕。
  • 当指定initial-scale = 1，而不设置width属性时，大部分浏览器会将布局视口宽度设置为设备理想视口宽度
因为 initial-scale = 1
所以 视觉视口 = 理想视口 ÷ 1.0 = 理想视口
又因为 没有设置width
所以 视觉视口 = 布局视口
所以 视觉视口 = 布局视口 = 理想视口