Firefox for Android中onload事件期间window.innerWidth的值是否为错误？ [英] Wrong value for window.innerWidth during onload event in Firefox for Android?
问题描述
好的，所以，我面临的问题是：我的移动Firefox浏览器没有检索 window.innerWidth ，文件的正确值.documentElement.clientWidth ，甚至是 div 的宽度，用于在页面加载后占用整个客户端窗口。
Okay, so, the problem I am facing is this: my mobile Firefox browser is not retrieving the correct values for window.innerWidth, document.documentElement.clientWidth, or even the width of a div styled to take up the whole client window after page load.
我并不疯狂，我的代码在其他所有浏览器中都运行良好！出于某种原因，Firefox使用默认值初始化这些值，然后在以后获取正确的值。如果我在任何时候使用 alert（）中断我的JavaScript，那么这些属性之后会神奇地变得准确。
I am not crazy, my code works just fine in every other browser! For some reason Firefox initializes these values with defaults and then gets the correct values later on. If at any point I interrupt my JavaScript with an alert(), these properties magically become accurate afterwards.
我已经在互联网上搜索了答案，我所能找到的只是一个黑客解决方法：使用 window.setTimeout 延迟使用这些属性，直到他们有时间正确填充。这很疯狂！用户希望速度，而不是额外的延迟只是为了在Firefox浏览器上查看我的网站。
I have scoured the internet for an answer and all I can find is a hack workaround: use window.setTimeout to delay the use of these properties until they have time to populate correctly. That is crazy! Users want speed, not an extra delay just to view my site on a Firefox browser.
我不明白的是我可以设置 div 在值变得准确之前完全填充客户端窗口。我通过将div的id的宽度和高度设置为100％来在css中执行此操作。 document.documentElement 与所有文档元素加载后的 document.getElementById（my_div）; 基本相同那么，当它首先没有客户端窗口的正确尺寸时，浏览器如何知道 div 应该有多大？
What I don't understand is that I can set a div up to fill the client window perfectly before the values become accurate. I do this in css by setting width and height of my div's id to 100%. document.documentElement is basically the same as document.getElementById("my_div"); after all the document elements have loaded, so, how does the browser know how big the div should be when it doesn't have the correct dimensions of the client window in the first place?
我试过在 window.addEventListener（load，function（event _）{// My Code}）中运行我的代码; 但仍然不会产生这些值。在 window.onload 之后是否有页面加载事件？
I have tried running my code inside a window.addEventListener("load",function(event_){ //My Code }); but still these values will not generate. Is there a page load event that comes after window.onload?
如果有人能告诉我为什么只有Firefox移动似乎显示出这种奇怪的行为，我会给你一个心理上的高五。
If anyone can tell me why only Firefox mobile seems to display this odd behavior I will give you a mental high five.
这里有一些重新创建问题的示例代码：
Here's a bit of sample code for recreating the problem:
<!DOCTYPE HTML>
<html>
<head>
<!-- Added " after javascript during edit. -->
<script type="text/javascript">
window.addEventListener("load",function(event_){
var output=document.getElementById("output");
/* Returns some default value like 980. */
output.innerHTML=window.innerWidth;
alert("After this alert, the value will change.");
/* Returns an accurate value like 511. */
output.innerHTML=window.innerWidth;
});
</script>
<!-- Added title during edit. -->
<title>Title</title>
</head>
<body>
<p id="output">Default Output</p>
</body>
</html>
我的Firefox for android版本是35.0.1。我的Android版本是4.4.4。在我的设备上，Firefox显示器输出p元素中的980显示警报，然后再次显示980。页面刷新后，前两个步骤保持不变，但警报后的输出更改为360.这也发生在 document.documentElement.clientWidth 中。我尝试的任何属性似乎都没有得到正确的值。似乎Firefox在页面加载之后有一些延迟，然后它才能访问客户端窗口的维度......
My Firefox for android version is 35.0.1. My Android version is 4.4.4. On my device, Firefox displays "980" in the output p element, shows the alert, and then displays "980" again. After page refresh, the first two steps remain the same, but the output after the alert changes to 360. This happens with document.documentElement.clientWidth as well. No properties I try seem to get the correct values. It seems that Firefox has some sort of delay after page load before it has access to the client window's dimensions...
我在没有JQuery的情况下尝试了verge.airve.com插件它的最初反馈仍然是980.它在Chrome上也初始化为980，这很奇怪，因为Chrome没有它就按预期运行...
I tried the verge.airve.com plugin without JQuery and its initial feedback remained at 980. It also initialized as 980 on Chrome, which was weird, because Chrome worked as expected without it...
经过多次辩论后的解决方案被找到！ Firefox显然在加载后重新调整窗口大小（我想这是一个很好的衡量标准，谁真的知道）！因此，除了window.onload之外，通过添加resize事件处理程序，可以避免此问题！有关详细信息，请参阅下面接受的答案。
After much debate a solution was found! Firefox apparently resizes the window after it is loaded (I guess for good measure, who really knows)! So, by adding a resize event handler in addition to window.onload, this problem can be averted! See accepted answer below for more details.
推荐答案
确保在加载整个文档并调整其大小时完成测量。
Make sure your measurement is done when whole document is loaded and resized.
window.onload = showViewport;
window.onresize = showViewport;
function showViewport() {
var output=document.getElementById("output");
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height= Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
output.innerHTML = "Viewport size is " + width + "x" + height;
}
<body>
<p id="output">Default Output</p>
</body>
这篇关于Firefox for Android中onload事件期间window.innerWidth的值是否为错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
