检测对元视口缩放的支持 [英] Detect support for meta viewport scaling

查看:128
本文介绍了检测对元视口缩放的支持的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Is it possible to detect whether the browser will scale the website based on the meta viewport element?

推荐答案

没有'用于检测是否将应用元视口的任何JavaScript方法。但是,您可以检查它是否通过头部中的内联js通过两步流程应用,其方法如下:

There isn't any JavaScript method to detect if the meta viewport will be applied. However, you can check if it was applied via two step process with inline js in the head, with an approach such as:

<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/ )这不是一个常见的桌面屏幕。目前没有桌面浏览器支持元视口。

This works with responsive design in most common case on mobile because the initial/default viewport of mobile devices is 980px (http://www.quirksmode.org/mobile/metaviewport/) which isn't a common desktop screen-with at all. And no current desktop browsers support the meta-viewport.

我将使用此方法作为检测移动设备的因素。但是,值得注意的是有例外。因此,您不能单独依赖上述方法来处理所有设备。

I am going to use this method as factor to detect a mobile device in that respect. However, its worth noting that there are exceptions. So you can't rely on the above method alone for all devices.

例如。使用Blackberry Playbook时,默认视口大小已经匹配 c> device-width,initial-scale = 1 的600x1024像素大小,因此尽管元视口重新缩放,clientWidth也不会更改。

e.g. With the Blackberry Playbook, the default viewport sizes already match the 600x1024 pixel size of device-width, initial-scale=1, so clientWidth will not change despite meta-viewport rescaling.

这篇关于检测对元视口缩放的支持的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆