javascript - Ionic 应用程序中的屏幕尺寸错误

Question

我有一个奇怪的问题。我正在开发 Ionic 应用程序，我需要将屏幕的宽度和高度发送到插件。我在 javascript 端获取它们。

我正在 Nexus 6 中进行测试，但值不正确。它返回 660x412，当此设备的屏幕为 2k，2048x1080 时。

我试过:

screen.height
window.innerHeight
window.outerHeight

所有这些都是错误的。

我的元视口(viewport)是:

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

有人遇到过这个问题吗？

Answer 1

问题是，这些宽度和高度可能不代表物理屏幕，而是称为CSS像素的概念。

我们可以使用此值来获取物理屏幕尺寸，如下所示。

var physicalScreenWidth = window.screen.width * window.devicePixelRatio;
var physicalScreenHeight = window.screen.height * window.devicePixelRatio;

请注意，该值会根据当前屏幕方向而变化。