Question

我试图在Ionic 2项目上获得屏幕宽度和高度。

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

home.ts：

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;
  }
}

home.html：

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

当我在桌面上投放应用时，一切都按预期工作： innerWidth x innerHeight：1920 x 913

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

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

对我可能缺少什么的想法？

Answer 1

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

According to MDN：

对于密度超过300dpi的显示器，该比率是整数层（密度/ 150dpi）。

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

Android上window.innerWidth的意外值

1 个答案: