工具介绍

这是一个交互式演示工具，用于直观理解 <meta name="viewport"> 各个配置项对移动端页面显示的影响。

快速体验

💡 提示：上方为交互式工具，如果无法正常显示，请点击这里直接打开

使用说明

如何测试

1. 打开手机模拟模式：按 F12 打开开发者工具，点击手机图标
2. 选择不同设备：切换 iPhone、Pixel 等设备进行对比
3. 尝试不同配置：从下拉框选择各种 viewport 预设
4. 双指缩放测试：在手机上或模拟器中尝试缩放操作

配置项说明

配置	效果	适用场景
无 viewport	页面被压缩到约 980px	❌ 不推荐
width=device-width	视口宽度=设备宽度	✅ 响应式网站标配
width=800	固定宽度 800px	专为平板设计
initial-scale=0.5	页面缩小至 50%	展示全貌
user-scalable=no	禁止缩放	⚠️ 不推荐（无障碍问题）

学习要点

1. 为什么要设置 viewport？

移动端浏览器默认会将页面渲染在一个约 980px 的虚拟窗口中，导致 PC 端页面在小屏幕上被压缩，文字难以阅读。

2. 标准配置

<meta name="viewport" content="width=device-width, initial-scale=1.0">