javascript - 检测浏览器是否关心元视口(viewport)

Question

我想完成一些事情，为此我需要知道浏览器是否关心元视口(viewport)。

比如 iOS 的 chrome 会根据 viewport 的内容进行调整。但是 chrome for windows 不会。

了解浏览器是否使用视口(viewport)内容的最佳方法是什么？

Answer 1

看起来像设置 viewport标签有点 debate .听起来你的问题可能是合理的(“我网站上的一些访问者不关心响应式设计”)查看前面标记的 HTMLBOY 博客文章；但是，如果您继续使用它，则有几件事需要注意(第一、第二和第三实际上是要点):

1. 网站本身必须响应 - 不仅仅是浏览器，即 <meta... content="width=device-width">除非您的网站知道如何扩展，否则不会做任何事情
2. 是true那viewport标签目前不是任何网络标准的一部分，最初是苹果专有的(这可能是您问题的根源)。 Not all browsers support it.
3. A pixel is not a pixel ，即 CSS 像素不是物理像素 - 两者没有联系在一起(这意味着 <meta> 标签上的配置属性与 viewport 相关时可能会出现问题(特别是考虑到上面的第 2 点和在同一点的链接 MDN 文章中进行了阐述。有关并发症的进一步阅读，您可以阅读 here 和 here
4. (有用的提示)如果网站上的内容很重要，请不要设置 maximum-scale或 user-scalable=no属性。这将阻止用户更仔细地检查重要文本。

既然一切都已经过去了......

您的问题“了解浏览器是否使用视口(viewport)内容的最佳方法是什么？”的答案是，确实没有很好的方法来做到这一点。

但是，由于浏览器之间的不兼容，我们确实有两个属性可以帮助我们使用与“视觉视口(viewport)”(更小)和“布局视口(viewport)”(更宽)这两个概念相关的内联 JavaScript“回到过去”。

视觉视口(viewport) 是用户在他或她的屏幕上看到的部分 - 当前看到的部分。这是在检查大于设备屏幕的内容时滚动的内容。

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

Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.

那么，我们如何利用它来发挥我们的优势呢？

我们无法检测浏览器是否支持该标签；但是，我们可以检测浏览器是否应用了它。我不打算重新发明轮子，所以我会把你链接到这个 SO answer然后是 article其中(已在上面链接)深入探讨了该主题。这些知识应该为您指明正确的方向。