javascript - 即使视口(viewport)元标记在页面中，也能获取真实的设备尺寸

Question

我需要检索移动设备的真实尺寸(宽和高)。

例如，如果在我的 index.html 中，我删除视口(viewport)元标记:

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

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

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

window.innerWidth当然可以降到 412px。

我需要为页面中的“移动 UI”提供视口(viewport)的好处，但同时我需要检索设备的实际尺寸。

例如innerWidth 是 412px，但实际设备宽度是 981px，我想请求一张 width=981px 而不是 412px 的图像以获得更好的质量。

有一种方法可以通过在页面内添加视口(viewport)标签来检索真实设备尺寸吗？

提前致谢。

Answer 1

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