检测浏览器是否关心元视口

Question

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

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

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

Answer 1

看起来设置viewport标记有点debate。听起来你的问题可能是有道理的（＆＃34;我网站上的一些访问者不关心响应式设计＆＃34;）查看上面标记的 HTMLBOY 博文;但是，如果你继续使用它，有一些事情需要注意（第一，第二和第三个真的是拿走点）：

1. 网站本身必须具有响应能力 - 不仅仅是浏览器，即<meta... content="width=device-width">除了您的网站知道如何扩展之外，还不会做任何事情
2. true viewport标记目前不属于任何Web标准，而且最初是Apple专有的（这可能是您的问题的根源）Not all browsers support it.。 A pixel is not a pixel
3. here，即CSS像素不是物理像素 - 两者没有捆绑在一起（这意味着与<meta>相关的viewport标记上的配置属性可能会变为有问题的（特别是考虑到上面的第2点，并在链接的MDN文章中阐述了相同点）。有关并发症的进一步阅读，您可以阅读here和answer
4. （有用的提示）如果网站上的内容很重要，请不要设置maximum-scale或user-scalable=no属性。这将阻止用户更密切地检查重要文本。

现在已经完全消除了......

您的问题的答案，＆＃34;了解浏览器是否使用视口内容的最佳方式是什么？＆＃34;，实际上没有很好的方法可以做到这一点。

但是，我们确实有两个属性可以帮助我们使用与＆＃34; visual viewport＆＃34;的两个概念相关的内联JavaScript。 （较小）和＆＃34;布局视口＆＃34; （更广泛），这要归功于浏览器之间的不兼容性，以及当天的情况......＃/ p>

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

与CSS相关的所有内容都是根据布局视口计算的。正如链接文章所述，＆＃34;布局视口有多宽？这与浏览器不同。＆＃34;

  

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

那么，我们如何才能利用这一优势呢？

我们无法检测浏览器是否支持标记;但是，我们可以检测浏览器是否已应用它。我不会重新发明轮子，所以我会将你链接到这个SO article，然后{{3}}（已经在上面链接）深入探讨了这个主题。这些知识应该指向正确的方向。