【移动端】Viewport 视口

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 缩放

缩放指的是用户在浏览器中通过手势或浏览器缩放功能，将网页的内容放大或缩小。缩放与 视觉视口 密切相关，因为缩放操作会改变用户当前看到的区域。