你现在可以停止在 viewport 元标签中使用 maximum-scale=1 了

在先前的一些时期,为了支持响应式设计,填充整个移动设备的屏幕显示的网页开发人员使用了 viewport 元标签,并使用 maximum-scale=1 (或 user-scalable=no ) 属性来防止浏览器放大或缩小网页,这样可以确保最大限度地利用有限的屏幕空间。

然而,这种过度使用元标签的方法已经不再必要了。移动浏览器已经成熟到足以自动适应屏幕尺寸,而无需通过 viewport 元标签来提供任何帮助。更重要的是,maximum-scale=1 会导致一些意外的行为,例如禁止用户手动缩放网页,这可能会导致极大的不便。

Viewport 元标签本身的作用是指定 Web 页面在视口中的大小。当您在移动设备上浏览网站时,viewport 就是您现实中看到的可见区域,它通常比网页的实际大小要小。

所以,现在不再需要固定缩放网页的手段来适应不同屏幕了。正确的 CSS 和 JavaScript 技术可以确保网页在各种不同尺寸的屏幕上自动适应和缩放。

因此,我们可以安全地停止在 viewport 元标签中使用 maximum-scale=1 (或 user-scalable=no ) 属性,而允许移动设备浏览器根据自己的判断进行自动缩放。这样可以改善用户体验,还可以避免许多潜在的问题。

回到目前的现实,应该明确指出的是,由于过去的需要和惯例,许多旧网站可能仍在使用此类标记。如果您正在进行开发或维护现有的网站,则需要仔细考虑如何去掉 viewport 元标签的 maximum-scale=1 属性,以避免任何潜在的问题。

在移动优化的时代,我们需要更加注重用户体验。当然,最好的方法就是通过自适应布局,确保为这些用户提供最佳的体验。

详情参考

了解更多有趣的事情:https://blog.ds3783.com/