Cordova get screen width and height on 'device ready' event

Question

I have a problem to get screen width and height in my Cordova app. I need those values right after the app starts. Right now I'm trying something like this:

document.addEventListener('deviceready', function() {
    'use strict';

     var canvas = document.querySelector('#myApp'),
         ctx = canvas.getContext('2d'),
         appSize = {
             w: window.innerWidth,
             h: window.innerHeight
         };

     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;

     (code code code code)

}, flase)

The problem is that canvas gets 0px width and 0px height. One thing worth mentioning is that when I set those values later (for example after 'touchstart' event) everything works.

Anybody knows a solution for that?

Answer 1

Simply use jquery function. And should use document.ready instead of deviceready. May be your deviceready running before page load. There is very little difference of timing between deviceready and document.ready.

$(document).ready(function()
{
var height = $(window).height(); 
var width = $(window).width(); 
// do something
});