Why does Javascript return different display resolutions of the device?
I would like to ask about this:
I have this smartphone with 720 x 1280 pixels resolution:
http://www.gsmarena.com/lenovo_p780-5544.php
But in a Cordova app the following piece of code:
var width = $(window).width();
var height = $(window).height();
console.log("Screen size "+width+" " + height);
Return value 640 x 360 pixels
This creates a problem with optimizing the css styles for devices (tablets vs smartphones), because if I used the 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, no css rules applied to the screen are mentioned.
The Meta viewport tag is used as follows:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
And the app only works in landscape mode.
I would like to ask why javascript returns different value and how to deal with this problem in Cordova + Ionic application?
Thanks a lot for any advice.
source to share
Some screens need fixing due to the oddity in the -webkit-device-pixel-ratio, especially on Android. You can try https://github.com/biodiv/cordova-screengod
which tries to fix the software's screen resolutions to match the physical resolution. Use
screengod(['path/to/your.css'],function(){
alert(app.deviceWidth + "x" + app.deviceHeight);
});
and check if it fixed your screen. You need an application object in window
, although for example
app = {};
unless you are using the apache cordovas starter template.
source to share