检测支持元视窗缩放



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

没有任何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>

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

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

。对于黑莓Playbook,默认的视口大小已经匹配device-width, initial-scale=1的600x1024像素大小,所以clientWidth将不会改变,尽管元视口重新缩放。

不,meta viewport元素只是告诉移动浏览器应该如何处理当前页面。所以,这取决于你要做什么。

如果你想捕获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%;}
} 

相关内容

  • 没有找到相关文章

最新更新