检测浏览器是否支持meta viewport

Question

我想实现某些功能，为此我需要知道浏览器是否关注meta视口。

例如，iOS上的Chrome将根据视口的内容进行调整。但是Windows上的Chrome不会。

如何最好地了解浏览器是否使用视口内容？

- Alvarez

---

虽然可能有方法可以做到这一点，但似乎您已将原始问题分成了两个部分：一个简单的部分和一个不可能的部分。如果您在问题中包含原始问题，可能会有所帮助。 - Christian Aichinger

最好采用特性检测，即“var isTouch = ('ontouchstart' in window);”，如此之前的答案所述：https://dev59.com/lFbTa4cB1Zd3GeqP7yT2 - Grant Gibson

我的网站上有一些访问者不关心响应式设计，喜欢使用“完整”设计。有几种方法可以关闭响应式，我发现最适合我的是操纵视口数据。但我需要知道浏览器是否支持它，所以如果不支持，我可以提供某种备用方案。 - Alvarez

这是一个合法的问题，启发式方法，如检查触摸是否启用，不会起作用 - 我们都知道桌面浏览器在某些时候会开始响应视口标签。 - Jon z

Answer 1

看起来设置viewport标签有点争议。听起来你的问题可能需要（“我的网站上的一些访问者不关心响应式设计”）查看前面标记为HTMLBOY的博客文章；但是，如果您继续使用它，有几件事情需要注意（第一、第二和第三点真正是要点）：

1. 网站本身必须是响应式的 - 不仅仅是浏览器，即使使用<meta... content="width=device-width"> ，除非您的网站知道如何缩放，否则不会起作用。
2. true viewport 标签目前不是任何Web标准的一部分，最初是苹果公司专有的（这可能是您问题的根源）。 并非所有浏览器都支持它。
3. 像素不是像素, 即CSS像素不是物理像素 - 两者不是相互关联的（这意味着当与viewport相关的<meta>标签的配置属性变得棘手时（特别是考虑到上面的第2点，并在同一点链接的MDN文章中阐明）。有关复杂性的更多阅读，请阅读此处和此处。
4. (有用的提示) 如果网站上的内容很重要，请勿设置maximum-scale或user-scalable=no属性。这将阻止用户更仔细地查看重要文本。

现在所有的事情都处理完了...

对于你的问题，“如何知道浏览器是否使用视口内容”，答案是没有一个很好的方法。

然而，我们有两个属性可以帮助我们使用内联JavaScript，这与“可视视口”（较小）和“布局视口”（更宽）的两个概念相关，这要归功于浏览器“当时”的不兼容性。

“可视视口”是用户在屏幕上看到的部分 - 当检查大于设备屏幕的内容时，将滚动此部分。

与CSS相关的所有内容都是根据“布局视口”计算的。正如链接的文章所述，“布局视口的宽度是多少？这因浏览器而异。”

因此，元素最初采用布局视口的宽度，并且您的CSS被解释为屏幕比手机屏幕宽得多。这确保了您的网站布局的行为与桌面浏览器相同。

那么，我们该如何利用这一点呢？

我们无法检测浏览器是否支持该标签，但是我们可以检测浏览器是否应用了它。我不会重新发明轮子，所以我会链接你到这个SO 答案，然后是一个文章，它（已经在上面链接了）深入探讨了这个主题。这些知识应该指引你朝着正确的方向前进。

- Thomas