[英]Wrong value for window.innerWidth during onload event in Firefox for Android?
好的，所以，我面临的问题是：我的移动 Firefox 浏览器没有检索到window.innerWidth 、 document.documentElement.clientWidth的正确值，甚至是div的宽度，样式设置为在页面后占据整个客户端 window加载。
我没疯，我的代码在所有其他浏览器中都运行良好。 出于某种原因 Firefox 使用默认值初始化这些值，然后稍后获取正确的值。 如果在任何时候我用alert()打断了我的 JavaScript ，这些属性之后会神奇地变得准确。
我在 inte.net 上搜索了一个答案，我所能找到的只是一个 hack 解决方法：使用window.setTimeout延迟这些属性的使用，直到它们有时间正确填充。 这太疯狂了，用户想要速度。 在 Firefox 浏览器上查看我的网站并没有额外的延迟。
我不明白的是，我可以设置一个div来在值变得准确之前完美地填充客户端 window。 我在 css 中通过将我的 div 的 id 的宽度和高度设置为 100% 来执行此操作。 document.documentElement与document.getElementById("my_div"); 在加载所有文档元素之后，浏览器如何知道div应该有多大，而它首先没有客户端 window 的正确尺寸？
我尝试在window.addEventListener("load",function(event_){ //My Code });中运行我的代码但仍然不会产生这些值。 window.onload之后是否有页面加载事件？
如果有人能告诉我为什么只有 Firefox 手机似乎显示出这种奇怪的行为，我会给你一个精神上的高五。
下面是一些用于重现问题的示例代码：
<!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 为 android 版本是 35.0.1。 我的Android版本是4.4.4。 在我的设备上，Firefox 在 output p 元素中显示“980”，显示警报，然后再次显示“980”。 页面刷新后，前两个步骤保持不变，但警报后的 output 变为 360。 document.documentElement.clientWidth也会出现这种情况。 我尝试的任何属性似乎都无法获得正确的值。 似乎 Firefox 在页面加载后有某种延迟才能访问客户端窗口的尺寸......
我尝试了没有 JQuery 的 verge.airve.com 插件，它的初始反馈保持在 980。它在 Chrome 上也初始化为 980，这很奇怪，因为 Chrome 在没有它的情况下按预期工作......
经过多次辩论，找到了解决方案，Firefox 显然会在加载后调整 window 的大小（我想这是很好的衡量标准，谁知道呢）。 因此，通过在 window.onload 之外添加一个 resize 事件处理程序，可以避免这个问题！ 有关更多详细信息，请参见下面接受的答案。
确保在整个文档加载和调整大小时完成测量。
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>
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) 来说是必要的，但谁知道其他设备需要什么？
我可以确认这个问题，例如在 Android 4.1.2 上的 Firefox 38.0.1 中。 创建了一个js bin用于测试目的。
我想检查 window.innerWidth 在不同分辨率（移动设备、平板电脑和桌面大小）上的自定义 DOM 操作，因此重要的是在 document.ready() 状态中获取正确的 window.innerWidth 值而不是仅在 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>
（我只想添加评论，而不是回答，但还没有声誉这样做:-)
我在CodeNameOne和 Android 中使用BrowserComponent时遇到了同样的问题
我的解决方案是将 js 放在像这样的函数中
function runScripts()
{
//get width here
}
并在浏览器完全加载后监听BrowserComponent的onLoad事件以执行此脚本
像这样：
BrowserComponent browser = new BrowserComponent();
browser.addWebEventListener("onLoad", new ActionListener() {
public void actionPerformed(ActionEvent evt) {
browser.execute("runScripts()");
}
});
browser.setURL("http://www.URL.com");
处理 html 中的window.onload不足以等待提供适当的宽度
除了这个解决方案，我还发现window.setTimeout(runScripts, 500); 努力获得正确的文档宽度，代价是浪费半秒
window.setTimeout(yourFunction, 1);
这为我完成了工作，1ms 就足够了。
我发现一个非常黑客的解决方案是在标题中调用一个假链接。 我的猜测是时间延迟允许在脚本执行之前更新 window.innerWidth 和 window.innerHeight。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/fake.css"/>
我遇到了同样的问题，在带有 Firefox 的 android 设备上获取 window.innerWidth 时宽度不同。我尝试了上面的一些建议，但没有成功 - 可能以错误的方式实现示例？
但是，通过使用下面的代码，据我测试，我得到的系统似乎 100% 正常工作。 它也几乎没有延迟，因为它一旦获得稳定的结果就会打破循环。
var canvasWidth = 0;
var canvasHeight = 0;
var previousWidth = -1;
var previousHeight = -1;
while ((canvasWidth != previousWidth) || (canvasHeight != previousHeight))
{
previousWidth = canvasWidth;
previousHeight = canvasHeight;
canvasWidth = window.innerWidth;
canvasHeight = window.innerHeight;
}
Android浏览器-Javascript window.innerWidth返回错误的值
[英]Android Browser - Javascript window.innerWidth returns wrong value
Firefox 78.0.1 响应式设计模式未在屏幕旋转后返回 window.innerWidth 的正确值
[英]Firefox 78.0.1 Responsive Design Mode not returning correct value for window.innerWidth after screen rotation
存储window.innerWidth值，并在调整大小时计算与新值的差？
[英]Store the window.innerWidth value and calculate the difference with the new value on resize?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.