这是什么
这项检查专门查看一个页面的 viewport 元标签是否包含了禁用缩放的设置——最常见的是 user-scalable=no 或 maximum-scale=1,被添加到了原本仅仅是为移动端响应式所必需的同一个标签上。这些附加设置过去有时被用来防止意外的双击导致意外放大,但它们有一个严重的、无意的副作用:它们会完全阻止缩放,即使访客是有意想要双指放大。
这与页面根本没有 viewport 标签(那会导致另一种、纯视觉性的问题,在我们其他的 viewport 指南中讲过)是不同的——这里专门讲的是一个存在但被配置为主动阻止缩放的 viewport 标签。
为什么重要
许多视力低下的访客依赖双指缩放,把它作为在任何页面上舒适阅读网页内容的正常方式,根据自己的视力状况调整到合适的缩放级别。阻止这项功能不只是造成不便——对于真正需要它的人来说,这可能让页面的内容完全无法阅读,就是这么彻底,无论页面其他部分设计得多好。
这在 WCAG(标准的网页无障碍指南)中被明确指出,它要求不能禁用缩放,正是因为这对视力低下人士的影响有多直接——这被认为是较为严重、且完全可以避免的无障碍失败之一,恰恰因为它剥夺了浏览器本身默认就已经提供的一项功能。
如何解决
- 检查你页面的 viewport 元标签中是否有
user-scalable=no,或者maximum-scale的值为1或更低。 - 如果存在,就移除这两个特定部分,保留标签其余部分(
width=device-width, initial-scale=1)不变。 - 如果最初的目的是防止在某个特定交互元素上意外的双击缩放,那就通过更针对性的样式来处理那个元素,而不是禁用整个页面的缩放。
- 如果你使用的是网站建设工具,这很少是平台默认设置的东西——检查你添加到页面
<head>部分的任何自定义代码片段。 - 之后在实际手机上测试,尝试在页面上双指缩放,确认它现在能正常响应。