这是什么
手机屏幕在物理上很窄，但很长一段时间里，大多数网站都是按更宽的桌面屏幕来构建的。为了让那些旧网站依然可用，移动浏览器默认会悄悄假装屏幕大约有 980 像素宽——大致相当于桌面尺寸——然后把整个结果缩小以适配屏幕，这就是为什么一个未做适配的页面在手机上看起来会又小又「缩放过度」，直到有人用手指捏合放大。
viewport 元标签是一行代码，<meta name="viewport" content="width=device-width, initial-scale=1">，它覆盖了那个旧的默认设置，告诉浏览器「请按真实屏幕宽度、正常缩放比例来设置这个页面的尺寸」。正是它让响应式设计（能适应不同屏幕尺寸的设计）真正在手机上生效。
为什么重要
如果没有这个标签，一个经过精心设计、能够为移动屏幕重新排布和调整大小的页面永远得不到发挥的机会——无论底层设计实际上做得多好，手机都会把它渲染成一个缩小版的桌面布局。这是一个纯技术性的、非有即无的设置：要么标签存在且正确，要么每一位使用手机的访客都会看到错误的布局，无论网站其他部分设计得多好。
由于大多数网站一半以上的流量来自手机，这一行缺失的代码就可能在访客还没开始阅读之前，就影响到大多数访客。
如何解决
- 查看你页面的 HTML 源代码，检查
<head>部分里是否有以<meta name="viewport"开头的标签。 - 如果缺失，就在
<head>部分中添加<meta name="viewport" content="width=device-width, initial-scale=1">。 - 如果你使用的是网站建设工具（Squarespace、Wix、Webflow、WordPress），这通常由平台自动设置——这里缺失标签几乎总是意味着有自定义代码嵌入覆盖了它，所以检查一下你添加过的任何自定义
<head>代码。 - 避免在同一个标签中添加
maximum-scale=1或user-scalable=no——这些设置会阻止访客用手指捏合缩放，从而造成另一个无障碍问题。 - 之后在实际手机上（或浏览器的移动预览模式中）加载页面，确认它现在以可读的大小填满屏幕，而不是显得缩小了。