Android browser's screen.width, screen.height & window.innerWidth & window.innerHeight are unreliable

Question

I\'m working on a web app that is targeted to browsers on desktop, tablet and smartphone.

The web app has a light box implemented using Colorbox with an iframe

Answer 1

In my case, the setTimeout hook was not useful.

After some digging, I discover that different Android versions (and devices) have different devicePixelRatio values.

If the devicePixelRatio is equal or greater than 1, the actual number of pixels in the screen (for the html page point of view) is given by window.screen.width (or ...height).

But, if the window.screen.width is less than 1 (it happens in some old Android devices), the actual number of pixels becomes: window.screen.width/devicePixelRatio.

So, you just have to cope with this.

w = window.screen.width;
h = window.screen.height;

if(window.devicePixelRatio < 1){
  w = window.screen.width/window.devicePixelRatio;
  h = window.screen.height/window.devicePixelRatio;
}