innerwidth 和 innerheight 在 android 和 safari 上得到不同的值答案

【问题标题】：innerwidth and innerheight get different values on android and safariinnerwidth 和 innerheight 在 android 和 safari 上得到不同的值
【发布时间】：2014-10-21 22:02:50
【问题描述】：

我发现window.innerWidth、window.innerHeight、body.clientWidth 和body.clientHeight 在window.onload 之前和之后执行时会得到不同的值。但是网页完全没有变化（区域都一样）。下面列出了测试结果。这是所有基于 web-kit 的浏览器的正确行为吗？

<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.

【问题讨论】：

在 Android 上，980px 是没有指定视口的页面的默认宽度。似乎在加载您的页面并且没有找到视口元标记后，它将其更改为默认宽度和高度。
所以我需要检测窗口的宽度和高度并在加载正文后进行操作？
当然，因为浏览器在加载和渲染之前无法发现页面尺寸...

标签： javascript css dom

【解决方案1】：

我遇到了类似的问题，答案是设备的目标密度与设备 dencity 元标记有点关系。类似问题的网址，但Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone?

您可以进一步调查，但我认为有问题:)

【讨论】：

谢谢乔治。但是，我的项目不允许使用视口。