获取真实的设备尺寸，即使视口元标签在页面中

Get real devices dimensions even if the viewport meta tag is in the page

本文关键字：标签 视口 真实 获取      更新时间：2023-09-26

我需要检索实际尺寸(w &H)移动设备

例如，如果在我的index.html中，我删除的viewport meta标签:

<!--meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0" /-->

在Nexus 6上window.innerWidth是981px。如果我添加视口元标签:

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

的window.innerWidth下降到412px当然。

我需要viewport的好处为我的"移动UI"在页面中，但同时我需要检索设备的真实尺寸。

。innerWidth是412px，但是实际的设备宽度是981px，我想要一个宽度为981px而不是412px的图像，以获得更好的质量。

有一种方法来检索真正的设备尺寸与viewport标签添加在页面内?

无论是否存在viewport元标记，您都可以使用window.screen.width和window.screen.height来获取设备尺寸。

我在viewport改变它们之前做了一个' pig -around'来检索真实的设备尺寸。

<head>
  <script type="text/javascript">
    var preMetaWidth = window.innerWidth;
    var preMetaHeigth = window.innerHeight;
  </script>
  <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0" />
</head>
<body>
    ...
</body>
相关文章：