检测对元视口缩放的支持答案

【问题标题】：Detect support for meta viewport scaling检测对元视口缩放的支持
【发布时间】：2013-05-26 11:55:10
【问题描述】：

是否可以根据元视口元素检测浏览器是否会缩放网站？

【问题讨论】：

标签： javascript html responsive-design progressive-enhancement

【解决方案1】：

没有任何 JavaScript 方法可以检测是否会应用元视口。但是，您可以检查它是否是通过两步过程应用的，其中包含内联 js，方法如下：

<head>
<script>
  var clientWidth = document.documentElement.clientWidth;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
  if (clientWidth !== document.documentElement.clientWidth){
  //device or browser support the meta-viewport which just changed the width
  }
</script>
</head>

这适用于响应式设计在移动设备上最常见的情况，因为移动设备的初始/默认视口是 980 像素 (http://www.quirksmode.org/mobile/metaviewport/)，这根本不是常见的桌面屏幕。并且当前没有桌面浏览器支持元视口。

我将使用此方法作为在这方面检测移动设备的因素。但是，值得注意的是，也有例外。所以你不能对所有设备单独依赖上述方法。

例如在 Blackberry Playbook 中，默认视口大小已经与 device-width, initial-scale=1 的 600x1024 像素大小匹配，因此尽管元视口重新缩放，clientWidth 也不会改变。

【讨论】：

【解决方案2】：

不，元视口元素只是告诉移动浏览器它应该如何处理当前页面。所以，这取决于你会做什么。

如果你会捕捉到 resize 事件，那么你可以使用一些 javascript：

$(window).resize(function() {
    //resize just happened, pixels changed
});

或者，如果您只想在不同的屏幕尺寸上添加不同的样式，请在您的 css 文件中使用媒体查询，例如：

@media only screen and (min-width : 30em) {
    body{font-size: 125%;}
}

@media only screen and (min-width: 37.5em) {
    body{font-size: 163%;}
}

【讨论】：