Cordova：如何获取应用程序的宽度和高度？

Question

我需要使用 JavaScript 为我的 cordova android 应用程序获取窗口的宽度和高度。

我尝试过来自 JQuery 库的$(window).width() and $(window).height()，但结果是喜怒无常：

我在 Nexus 7 上进行测试，当我以纵向模式打开应用程序时，我得到宽度 = 600，高度 = 888。

当我将设备旋转到横向并重新计算它们应该交换时它们不会改变的尺寸，当我将设备旋转回纵向时，我得到宽度 = 960，高度 = 528。

我对这个输出感到非常困惑，这让我觉得我使用了错误的代码。非常感谢您的帮助或建议。

这里是获取屏幕尺寸的函数：

function getDimensions() {
    //Gets height and width of web browser
    var height = $(window).height(); 
    var width = $(window).width();

    //Stores dimensions in array of form [width,height] 
    var dimensions = [width,height];

    return dimensions;
}

这是我在旋转后检查尺寸的地方：

function onOrientationChange() {
    var dimensions = getDimensions();
    console.log("rotation width " + dimensions[0] + " height " + dimensions[1]);
}

Answer 1

尝试： var w = window.innerWidth; var h = window.innerHeight; 我知道这适用于网络浏览器

Answer 2

您必须使用orientationchange 事件：

orientationchange 事件在设备的方向改变时触发。

Window.orientation 属性包含一个代表当前方向的数字（查看下图了解更多详情）。

注意！：window.orientation 在桌面浏览器中返回 undefined。所以请在模拟器或设备上进行测试。

解决方法：

1. 将 orientationchange 事件附加到全局窗口对象。
2. 检查方向值并在里面做一些逻辑。

window.addEventListener("orientationchange", orientationChange);

function orientationChange() {
  switch (window.screen.orientation) {
    case "landscape-primary":
      //your function over here: getDimensions();
      break;
    case "portrait-primary":
      //your function over here: getDimensions();
      break;
    default:
      break;
  }
}