为什么 Javascript 返回设备显示的不同分辨率？答案

【问题标题】：Why Javascript returns different resolution of the device display?为什么 Javascript 返回设备显示的不同分辨率？
【发布时间】：2015-07-08 13:05:59
【问题描述】：

我想问这个：

我有这款分辨率为 720 x 1280 像素的智能手机：

http://www.gsmarena.com/lenovo_p780-5544.php

但在 Cordova 应用程序中是以下代码 sn-p:

 var width = $(window).width();
            var height = $(window).height();
            console.log("Screen size "+width+" " + height);

返回值 640 x 360 像素

这给设备（平板电脑与智能手机）的 CSS 样式优化带来了问题，因为如果我使用以下 CSS：

@media only screen
and (device-height: 720px)
and (device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1) {
    #desk {
        top:35%;
    }

    #menuRightSide {
        top: 37%;
    }
    #castleHomePage{
        top: 41%;
    }

    #spiderTwo {
        width: 5.5%;
        left:1%;
        top:12%;
    }
    #movingSpiderOnTheNetWraper {
        height: 25%;
        top:1%;
    }
    #candle_1 {
        bottom: 11%;
    }

    #candle_2 {
        bottom: 10%;
    }

    #candle_4 {
        bottom: 11%;
    }

    .candleFlame {
        bottom: 46%;
    }
}

在这种情况下，没有提到应用于屏幕的 css 规则。

元视口标签使用如下：

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

并且应用程序仅在横向模式下运行。

我想问一下，为什么javascript返回不同的值以及如何在Cordova + Ionic App上处理这个问题？

非常感谢您的任何建议。

【问题讨论】：

标签： javascript android css cordova

【解决方案1】：

也许你正在寻找这个：

window.screen.availHeight
window.screen.availWidth

【讨论】：

它返回的值与我的问题中的值相同。

【解决方案2】：

由于 -webkit-device-pixel-ratio 的怪异，某些屏幕确实需要修复，尤其是在 Android 上。你可以试试https://github.com/biodiv/cordova-screengod

其中，尝试修复软件屏幕分辨率以匹配物理分辨率。使用

screengod(['path/to/your.css'],function(){
    alert(app.deviceWidth + "x" + app.deviceHeight);
});

并检查它是否修复了您的屏幕。您需要 window 中的 app 对象，例如

app = {};

如果你不使用 apache cordovas 启动模板。

【讨论】：