Clever Geek Handbook

Interior width and interior height get different values ​​on Android and Safari

I found window.innerWidth, window.innerHeight, body.clientWidth and body.clientHeight get different values ​​when executing it before and after window.onload. However, the web page doesn't change at all (the scopes are all the same). The test results are listed below. Is this correct for all web kit based browsers?

<html>
<head lang="en">
   <meta charset="UTF-8">
<title></title>
</head>
<script>
     console.log(window.innerWidth);
     console.log("<br />");
     console.log(window.innerHeight);
     console.log("<br />");
     console.log(body.clientWidth);
     console.log("<br />");
     console.log(body.clientHeight);
</script>
<body>
<br/>===================================<br/> 
</body>
<script>
    console.log(window.innerWidth);
    console.log("<br />");
    console.log(window.innerHeight);
    console.log("<br />");
    console.log(body.clientWidth);
    console.log("<br />");
    console.log(body.clientHeight);
</script>
</html>

Test Results:
Android Phone(720*1280,4.7''),Android Chrome
360
567
964
176
===================================
980 - window.innerWidth changed
1544 - window.innerHeight changed
964
440 - Why body.clientHeight becomes 440 after the blank body is loaded.
+3


source to share


1 answer


I have a similar problem for me, the answer is that target device density did a bit of work with device meta tags. Url to a similar problem, but is there any Android equivalent 'lt; meta name = 'viewport' content = 'target-densitydpi = device-dpi'> for Safari on iPhone?



You can investigate further, but I think there is a problem :)

0


source






More articles:


All Articles