1️⃣ 视口

2️⃣ PC 端

在 PC 端，视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。

2️⃣ 移动端

移动端的视口与 PC 端不同，有三个视口

  1. 布局视口
  2. 视觉视口
  3. 理想视口

3️⃣ 布局视口

布局视口是用来放置网页内容的区域。
一般移动设备的浏览器都默认定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定，大多数设备的布局视口宽度为 980px。

document.documentElement.clientWidth 
document.documentElement.clientHeight

3️⃣ 视觉视口

视觉视口就是用户可见的区域。

// 注：不缩放的情况下，视觉视口宽度 == 布局视口宽度。
window.innerWidth
window.innerHeight

3️⃣ 理想视口

宽度与屏幕同宽的布局视口称为理想视口。
理想视口的好处

  1. 用户不需要缩放和滚动条就能看到网站的全部内容。
  2. 针对移动端的设计稿更容易开发。
  3. 注意：理想视口不是真实存在的视口

设置理想视口

  1. width：视口的宽度，值为一个正整数，或字符串 device-width（ 设备的实际宽度--css像素 ）。不建议设置数字（安卓设备有些不支持）
  2. height：视口的高度（ 与width一至 ）
  3. user-scalable：是否允许用户进行页面缩放，值为no或yes，代表不允许与允许
  4. initial-scale：页面初始缩放值，值为一个数字（可以带小数）。
  5. minimum-scale：页面最小能够缩放的比例，值为一个数字（可以带小数）。
  6. maximu**m-scale：**页面最大能够缩放的比例，值为一个数字（可以带小数）。

<meta name="viewport" content="width=device-width" />
// 或者
<meta name="viewport" content="initial-scale=1.0" />
// 合体
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
// 加上禁止缩放 - 可以解决移动端300毫秒的点击延迟
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

1️⃣ 缩放

2️⃣ PC 端

3️⃣ 放大时

布局视口变小
视觉视口变小
元素的像素大小不变

3️⃣ 缩小时

布局视口变大
视觉视口变大
元素的像素大小不变

2️⃣ 移动端

3️⃣ 放大时

布局视口不变
视觉视口变小

3️⃣ 缩小时

布局视口不变
视觉视口变大
注意：移动端缩放不会影响页面布局

1️⃣ viewport 控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no,maximum-scale=1.0, minimum-scale=1.0">
// viewport 相关选项
width 布局视口宽度 - width 值可以是数字，也可以是设备宽度表示 device-width，这样可以得到完美视口
initial-scale // 为页面初始化时的显示比例 - scale = 屏幕宽度独立像素 / 布局视口宽度
注意：
    chrome 测试该参数会有偏差，真机测试
    initial-scale = 1.0 也可以得到完美视口
    initial-scale 会影响布局视口和视觉视口的大小
    width 与 initial-scale 同时设置时，会选择尺寸较大的那个
minimum-scale // 最小缩放比例 - minimum-scale = 屏幕独立像素宽度 / 视觉视口 
maximum-scale // 最大缩放比例 - maximum-scale = 屏幕独立像素宽度 / 视觉视口
user-scalable // 是否允许用户通过手指缩放页面。
viewport-fit auto/contain/cover // 设置为 cover 可以解决『刘海屏』的留白问题