1. 什么是 Viewport（视口）？
Viewport（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
- 在桌面设备上，Viewport 通常和浏览器窗口的大小一致。
- 在移动设备上，Viewport 是屏幕的可视区域。
2. 视口的分类
根据不同的设备，视口可以分为三种类型：
（1）Layout Viewport（布局视口）
布局视口 是浏览器用于布局网页内容的虚拟视口。对于桌面浏览器，布局视口的宽度通常等于浏览器窗口的宽度。但在移动设备上，为了避免网页内容在小屏幕上被压缩得过小，浏览器会默认提供一个比屏幕宽得多的布局视口（一般在 980px 左右），以确保桌面版网页在手机上看起来不会太窄。
特点：
- 这是网页最初布局时所使用的虚拟宽度，浏览器根据这个宽度来排布元素。
- 在移动设备上，布局视口的宽度通常远大于屏幕的实际宽度，以模拟桌面设备的显示效果。
问题：
- 一般来说，如果不指定特殊的 Viewport 设置，网页在移动设备上可能会显示得非常小，需要用户手动缩放。
（2）Visual Viewport（视觉视口）
视觉视口 是用户实际可见的网页区域。这是用户当前看到的网页部分，不包括缩放和滚动后的页面之外的区域。视觉视口会随着缩放和滚动而改变。
特点：
- 视觉视口随着缩放而动态变化，缩放时视觉视口会变小（放大页面）或变大（缩小页面）。
- 它是用户当前在屏幕上看到的区域，与用户的视图相关。
（3）Ideal Viewport（理想视口）
理想视口 是指与设备的物理分辨率和尺寸完美匹配的视口。它提供了在设备屏幕上适合用户阅读的最佳尺寸，而无需缩放。在响应式设计中，开发者通过指定理想视口，可以确保网页在不同设备上看起来合适。
特点：
- 理想视口通常通过 meta 标签设置，能够让网页根据设备宽度调整内容，使其无论在大屏幕还是小屏幕设备上都能适应。
3. Viewport 相关属性
在移动端中，默认是 Layout Viewport ，为了得到 Ideal Viewport ，开发者可以通过 <meta> 标签的 viewport 属性来控制网页的视口行为，特别是在移动设备上。
常见的 meta viewport 属性及其含义：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
width
指定布局视口的宽度，可以设置为一个具体的数值（如width=1024）或device-width，表示与设备屏幕宽度一致。width=device-width：将视口宽度设置为设备的实际宽度，这是移动设备上响应式设计的常用设置。
initial-scale
设置页面的初始缩放比例，1.0表示以 100% 的缩放比例显示页面内容。initial-scale=1.0：页面以 1:1 的比例显示，即不缩放。
maximum-scale
设置用户可缩放到的最大比例。maximum-scale=2.0：用户可以将页面缩放到最多 2 倍的大小。
minimum-scale
设置用户可缩放到的最小比例。minimum-scale=0.5：用户可以将页面缩放到最多一半大小。
user-scalable
决定用户是否可以手动缩放页面。user-scalable=no：禁止用户手动缩放页面。user-scalable=yes：允许用户手动缩放页面。
4. Viewport 缩放
缩放指的是用户在浏览器中通过手势或浏览器缩放功能，将网页的内容放大或缩小。缩放与 视觉视口 密切相关，因为缩放操作会改变用户当前看到的区域。