First of all the head contains this code
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm using this simple javascript code to get window width to append some files if width is less than 79px
$(document).ready(function(){
document.body.style.overflow = "hidden";
var viewportWidth = $(window).innerWidth();
document.body.style.overflow = "";
alert(viewportWidth);
if(viewportWidth<979){
alert('welcome');
}
});
and use this simple css code in the main css file for Phones
@media (max-width: 480px) {
body{background: pink;}
}
The problem is on PC (with the window re-sized as a Phone) the alert shows 303px then the page alerts 'welcome' but alerts 980px on Phone and tablet and does not alert 'welcome'. The background changes to pink on PC but does not change at all on Android Phone or tablet Where that difference come from and how to fix it?