Unexpected value for window.innerWidth on Android

Ionic Framework ionic-v3
1

Hello !

I’m trying to get screen width and height on an Ionic 2 project.

To do so, I’ve created a new ionic 2 blank project and modified home.html and home.ts in order to store and display innerWidth and 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>

When I serve the app on desktop, everything work as expected : innerWidth x innerHeight : 1920 x 913

But when I run this app on Android , I get and unexpected value : innerWidth x innerHeight : 360 x 574

This is quite strange because the resolution of my Android device is 1440 x 2560.
I’m surely facing a problem with pixel ratio here …

Any idea of what I might have to do to have innerWidth = 1440 on my Android device ?

2

I would recommend using Platform to get these dimensions, instead of reading the DOM.

1 Like