时间戳

首页 > 解决方案 > Viewport 元标记对 Chrome 和 Safari 的影响是否不同，如果是，如何弥补这一点？

html - Viewport 元标记对 Chrome 和 Safari 的影响是否不同，如果是，如何弥补这一点？

问题描述

问题描述：

我正在为一个生产网站设计一个移动导航系统，并且想使用 CSS 媒体查询来根据设备宽度调整移动导航布局的比例。为此，我需要引入如下所示配置的视口元标记。

<meta name="viewport" content="width=device-width">

不幸的是，在添加此元标记后，Safari（和 Firefox）仅在可视视口中呈现部分内容，而 Chrome 在可视视口中显示全部内容，这是我所期望的和我预期的结果。

IOS Safari手机截图

Android Chrome 屏幕截图

问题：

为什么浏览器对元标记的响应不同？而且，最重要的是，目前最正确的解决方案是配置 Safari和Chrome 以在可视视口中呈现所有内容而不考虑设备宽度？在不强制渲染的内容通过 CSS 响应地调整到视觉视口的大小的情况下，这是否可能？

附加信息：

我想要这个解决方案的原因是，网站的布局尺寸没有优化到低于 880 像素（不是我的设计）。而且，我相信重新设计所有页面的静态特性以使其具有响应性需要相当长的时间。所以我想要一个临时解决方案，以便网站在移动设备上暂时更可用，直到我能找到理想的解决方案。

目前，当视口元标记不存在时，移动浏览器似乎会自动调整视口，以便整个内容可见。所以我目前的解决方案，直到找到更好的解决方案，是使用 JavaScript 来检测浏览器代理，如果 chrome 则使用 JS 应用元标记，如果没有则不应用元标记，以便内容正确呈现在 Safari（和 Firefox）中。不幸的是，这意味着 iPad 和 iPhone 上的导航布局大小是相同的。不理想。

尝试的解决方案：

我已经尝试调整元标记的内容属性来设置初始比例，如下所示。

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

IOS Safari手机截图2

安卓 Chrome 截图 2

正如您在屏幕截图中看到的那样，随着视觉视口尺寸的进一步减小，这进一步加剧了问题。所以很自然地我也尝试减小初始缩放值以增加视口的大小，如下所示。

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

IOS Safari手机截图3

安卓 Chrome 截图 3

这确实具有在可视视口中显示整个内容的预期效果。但是，它也会触发 CSS 媒体查询来确定宽度大于 600 像素，而不管设备宽度如何。因此，在我的情况下，元标记的目的无效。

标签： htmlcross-browsermobile-safariviewportmobile-chrome

解决方案

如果我理解正确，您希望移动浏览器缩放您的设计以使所有内容都适合，但仍会检测到您在小屏幕上，以便您可以切换到不同的菜单设计。

对于临时解决方案，您可以：

  • 省略视口元
  • 查看device-width媒体查询，它匹配设备像素而不是 Safari / Chrome 中的 CSS 像素。

请注意，此媒体查询已弃用，Firefox 会报告 CSS 像素。目前我想不出处理 Firefox 的解决方案，但我希望这会有所帮助！

推荐阅读