Why Javascript returns different resolution of the device display?

Question

I would like to ask on this:

I have this smartphone with resolution 720 x 1280 pixels :

http://www.gsmarena.com/lenovo_p780-5544.php

But in the Cordova app is following code snippet:

 var width = $(window).width();
            var height = $(window).height();
            console.log("Screen size "+width+" " + height);

Returning value 640 x 360 px

It is creating problem with optimization of the css styles for the devices (tablets vs. smartphones) because if i used following css:

@media only screen
and (device-height: 720px)
and (device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1) {
    #desk {
        top:35%;
    }

    #menuRightSide {
        top: 37%;
    }
    #castleHomePage{
        top: 41%;
    }

    #spiderTwo {
        width: 5.5%;
        left:1%;
        top:12%;
    }
    #movingSpiderOnTheNetWraper {
        height: 25%;
        top:1%;
    }
    #candle_1 {
        bottom: 11%;
    }

    #candle_2 {
        bottom: 10%;
    }

    #candle_4 {
        bottom: 11%;
    }

    .candleFlame {
        bottom: 46%;
    }
}

In this case are not mentioned css rules applied to screen.

Meta viewport tag is used following:

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

And app is running only in landscape mode.

I would like to ask, why is javascript returning different value and how to handle this issue on the Cordova + Ionic App ?

Many thanks for any advice.

Answer 1

Perhaps you are looking for this:

window.screen.availHeight
window.screen.availWidth