Unerwarteter Wert für window.innerWidth auf Android

Question

Ich versuche, Bildschirm Breite und Höhe auf einem Ionic 2-Projekt zu erhalten.

so zu tun, ich habe ein neues ionischen 2 leeres Projekt erstellt und geändert home.html und home.ts um innerwidth und innerheight zu speichern und anzuzeigen.

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> 

Als ich dienen die App auf dem Desktop, alles wie erwartet: innerwidth x innerheight: 1920 x 913

Aber wenn ich diese App auf Android laufen, bekomme ich und unex teten Wert: innerwidth x innerheight: 360 x 574

Das ist ziemlich seltsam, weil die Auflösung meines Android-Gerät ist 1440 x 2560.

Jede Idee von dem, was ich vielleicht fehlt?

Answer 1

Es hat mit dem Geräte Pixel Verhältnis zu tun. Sie haben eine Geräteanzeige mit einem sehr hohen ppi (Pixel pro Zoll) und wahrscheinlich einem relativ kleineren Bildschirm.

According to MDN:

Für Displays mit Dichte über 300dpi, das Verhältnis der ganzzahlige Boden (Dichte/150dpi).

Basierend auf den innerwidth und innerheight Werte, die Sie erhalten, ist Ihr Gerät die Pixelverhältnis 4, so 1440 x 2560 wird 360 x 640. Der Grund, warum Sie bekommen ein kleiner als 640 innerheight Wert, weil der unteren Leiste Android Anwendungen ist für seine Hauptnavigation.