Wrong screen size in Ionic app

Question

I am having a weird problem. I am developing a Ionic app, and I need to send the width and height of my screen to a plugin. I am getting them in the javascript side.

I am testing in a Nexus 6, and the values are not correct. It returns 660x412, when the screen of this device is 2k, 2048x1080.

I have tryed:

screen.height
window.innerHeight
window.outerHeight

And all of it are wrong.

My meta viewport is:

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

Somebody have faced this problem?

Answer 1

The problem is, these width and height may not represent physical screen, but the concept called CSS pixel.

We can use this value to get physical screen size as given below.

var physicalScreenWidth = window.screen.width * window.devicePixelRatio;
var physicalScreenHeight = window.screen.height * window.devicePixelRatio;

Please note that the value will change depending on current orientation of screen.