PhoneGap/Cordova Android get screen size after onDeviceReady

Question

Android app returns invalid size (320x480) on onDeviceReady event, but after few seconds size becomes correct.

How can we get correct size at the very beginning? Or is there any event on which I can get correct size?

I'm using this function to get size:

function getWindowSizes() {
  var windowHeight = 0, windowWidth = 0;
  if (typeof (window.innerWidth) == 'number') {
      windowHeight = window.innerHeight;
      windowWidth = window.innerWidth;
      
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
      windowHeight = document.documentElement.clientHeight;
      windowWidth = document.documentElement.clientWidth;
      
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
     windowHeight = document.body.clientHeight;
     windowWidth = document.body.clientWidth;
  }
  return [windowWidth, windowHeight];
}

Viewport:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Using Cordova 2.5.0.

UPD:
As you can see on this screenshot application launches with smaller size. Even empty Cordova project does this. How can I fix this?

Thanks!

Answer 1

Try to remove target-densitydpi in the header.

device dpi is based on physical pixels while css pixels are logic pixels, they are some times different from each other, if you force them to the same, you'll see screen stretched.

window.devicePixelRatio may give you result of the conversion.(On webkit)

Update:

This link provide some more details on how it works: https://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/

Answer 2

Try to remove the position:absolute property in the app class (inside index.css). This works for me.

Answer 3

Remove height, width and density properties on meta header index.