理解 Viewport：让网页在手机端正确显示的秘诀

 

目录

什么是 Viewport？

为什么手机需要特殊处理？

神奇的 Meta 标签

基础写法 

关键属性详解

响应式设计的基石

什么是 REM？

为什么选择 REM？

实战：REM + Viewport 的最佳拍档

步骤 1：设置 Viewport

步骤 2：动态计算根字体大小

步骤 3：用 REM 构建布局

智能缩放原理（图示）

进阶技巧

1. 与 VW 单位结合

2. 像素转换神器

3. 防止过小字体

注意事项

REM vs 其他单位

---

什么是 Viewport？

当我们在手机上打开网页时，你有没有发现有些网站会自动调整成适合屏幕的大小，而有些却显示得像缩小版的电脑网页？这个神奇现象的背后，都与一个叫「viewport（视口）」的概念息息相关。

简单来说，viewport 就是设备上用来显示网页的「可视区域」。就像透过一个画框看画作，画框的大小决定了你能看到画作的哪部分：

• 桌面浏览器：viewport 等于浏览器窗口大小（约 1200px 宽度）

• 手机浏览器：默认采用「虚拟视口」（约 980px 宽度）

为什么手机需要特殊处理？

以 iPhone 13 为例，它的实际屏幕宽度只有 390px，但浏览器默认会假装自己有 980px 的宽度来显示传统网页。这会导致以下问题：

1. 文字变得像蚂蚁般细小

2. 用户必须不断放大才能阅读

3. 网页布局出现横向滚动条

神奇的 Meta 标签

这时候就需要我们的主角  标签登场了！通过在 HTML 的  中添加这个标签，我们可以告诉浏览器如何正确显示网页。

基础写法 

关键属性详解

属性	说明	推荐值
width	视口宽度	device-width
initial-scale	初始缩放比例	1.0
maximum-scale	允许的最大缩放比例（慎用！）	1.0（非必要不设置）
user-scalable	是否允许用户缩放（影响无障碍访问）	yes

专家提示：避免使用 maximum-scale=1.0 和 user-scalable=no，这会阻碍视力障碍用户正常使用网页，可能违反网站无障碍标准。

响应式设计的基石

什么是 REM？

正确设置 vi