好吧，所以，我面临的问题是：我的移动Firefox浏览器没有检索window.innerWidth，document.documentElement.clientWidth的正确值，甚至是div样式的宽度在页面加载后占用整个客户端窗口。
我并不疯狂，我的代码在其他所有浏览器中都运行良好！出于某种原因，Firefox使用默认值初始化这些值，然后在以后获取正确的值。如果我在任何时候用alert()打断我的JavaScript，那么这些属性在之后会神奇地变得准确。
我已经在网上搜索了一个答案，我所能找到的只是一个黑客解决方法：使用window.setTimeout来延迟使用这些属性，直到他们有时间正确填充。这很疯狂！用户希望在Firefox浏览器上查看我的网站时需要速度，而不是额外的延迟。
我不明白的是，在值变得准确之前，我可以设置div以完全填充客户端窗口。我通过将div的id的宽度和高度设置为100％来在css中执行此操作。所有文档元素加载后，document.documentElement与document.getElementById("my_div");基本相同，因此，当div没有正确的维度时，浏览器如何知道window.addEventListener("load",function(event_){ //My Code });应该有多大首先是客户端窗口？
我已尝试在window.onload内运行我的代码，但仍然无法生成这些值。在<!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手机似乎显示出这种奇怪的行为，我会给你一个精神上的高五。
以下是重新创建问题的示例代码：
document.documentElement.clientWidth我的Firefox for android版本是35.0.1。我的Android版本是4.4.4。在我的设备上，Firefox在输出p元素中显示“980”，显示警报，然后再次显示“980”。页面刷新后，前两个步骤保持不变，但警报后的输出更改为360.这也发生在{{1}}。我尝试的任何属性似乎都没有得到正确的值。似乎Firefox在页面加载之后会有某种延迟，然后才能访问客户端窗口的维度...
我在没有JQuery的情况下尝试了verge.airve.com插件，它的初始反馈仍然是980.它也在Chrome上初始化为980，这很奇怪，因为Chrome没有它的预期工作......
经过多次辩论后找到了解决方案！ Firefox显然在加载后重新调整窗口大小（我想这是一个很好的衡量标准，谁真的知道）！因此，除了window.onload之外，通过添加resize事件处理程序，可以避免此问题！有关详细信息，请参阅下面接受的答案。
答案 0 :(得分：10)
确保在加载整个文档并调整其大小时完成测量。
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>
答案 1 :(得分：0)
我可以确认这个问题，例如在Android 4.1.2上的Firefox 38.0.1中。为测试目的创建了js bin。
我想检查window.innerWidth以便在不同分辨率（移动设备，平板电脑和桌面设备尺寸）上进行自定义DOM操作，因此获取正确的window.innerWidth值非常重要.ready（）状态，而不仅仅是在window.load（）。
$('#inline').html($(window).width());
$(document).ready(function() {
$('#ready').html(window.innerWidth);
});
$(window).load(function() {
$('#load').html(window.innerWidth);
});
setTimeout(function() {
$('#setTimeout').html(window.innerWidth);
}, 1000);<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Bin</title>
</head>
<body>
<p><span id="inline"></span></p>
<p>$(document).ready(): <span id="ready"></span></p>
<p>$(window).load(): <span id="load"></span></p>
<p>setTimeout(1000): <span id="setTimeout"></span></p>
</body>
</html>
（我只想添加评论，而不是回答，但还没有声明： - ）
答案 2 :(得分：0)
Android 4.4.4下的Firefox 40.0问题（innerWidth === 980）仍然存在。 1毫秒的等待是一种规避。用
替换
window.onload = myProgram;
window.onload = function() {setTimeout(myProgram, 1)};
与此同时，我在将一个相当精细的网站改编为小屏幕时遇到了这个问题。 Firefox遵循“@media only screen and（max-width：768px）”之后的CSS。但是，当尝试根据设备宽度设置事件处理程序时，Firefox会失败。我需要上述技巧，在我拿起设备宽度的所有位置等待0.5秒。这个等待时间对于Nexus 7（2012）来说是必要的，但谁知道其他设备需要什么？
答案 3 :(得分：0)
在BrowserComponent和Android
CodeNameOne时，我遇到了同样的问题
我的解决方案是将js放在像这样的函数中
function runScripts()
{
//get width here
}
在浏览器完全加载后，听取onLoad的{{1}}事件来执行此脚本
BrowserComponent在html中处理 BrowserComponent browser = new BrowserComponent();
browser.addWebEventListener("onLoad", new ActionListener() {
public void actionPerformed(ActionEvent evt) {
browser.execute("runScripts()");
}
});
browser.setURL("http://www.URL.com");
还不足以等待提供适当的宽度
除了这个解决方案，我还发现window.onload可以获得正确的文档宽度，但却浪费了半秒
答案 4 :(得分：0)
window.setTimeout(yourFunction, 1);
这为我完成了工作，1毫秒就足够了。
答案 5 :(得分：0)
我发现一个非常黑客的解决方案是在标题中调用一个假链接。我的猜测是时间延迟允许在脚本执行之前更新 window.innerWidth 和 window.innerHeight。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/fake.css"/>