Android 上的 window.innerWidth 的意外值

Question

我正在尝试获取Ionic 2项目的屏幕宽度和高度。

为此，我创建了一个新的 ionic 2 空白项目，并修改了 home.html 和home.ts，以便存储和显示 innerWidth 和 innerHeight。

首页：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  innerWidth: number;
  innerHeight: number;
  constructor(public navCtrl: NavController) {
  }
  ngAfterViewInit() {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight;
  }
}

首页.html ：

<ion-content padding>
  <p>innerWidth x innerHeight : {{ innerWidth }} x {{ innerHeight }}</p>
</ion-content>

当我在桌面上提供应用程序时，一切都按预期工作：内宽 x 内高 ： 1920 x 913

但是当我在Android上运行这个应用程序时，我得到了意想不到的值：内宽 x 内高 ： 360 x 574

这很奇怪，因为我的Android设备的分辨率是1440 x 2560。

知道我可能错过了什么吗？

Answer 1

它与设备像素比有关。您的设备显示器具有非常高的 ppi(每英寸像素数(，并且屏幕可能相对较小。

根据MDN：

对于密度超过 300dpi 的显示器，比率为整数楼层(density/150dpi(。

根据您获得的 innerWidth 和 innerHeight 值，设备的像素比为 4，因此 1440 x 2560 变为 360 x 640。您获得小于 640 innerHeight 值的原因是 Android 用于其主导航的底部栏。