Geek Answers Handbook

Incorrect value for window.innerWidth during onload event in Firefox for Android?

So, the problem I ran into is this: my Firefox mobile browser does not retrieve the correct values ​​for window.innerWidth , document.documentElement.clientWidth or even the width of the style div to cover the entire client window after the page loads.

I'm not crazy, my code works fine in any other browser! For some reason, Firefox initializes these defaults and then gets the correct values ​​later. If at any time I interrupt my JavaScript with alert() , these properties will magically become accurate afterwards.

I browsed the internet for an answer, and all I can find is a workaround: use window.setTimeout to delay the use of these properties until they have time to fill out correctly. This is crazy! Users want speed, not an extra delay, just to browse my site in Firefox.

I do not understand that I can set the div to fill the client window before the values ​​become accurate. I do this in css, setting the width and height of my id div to 100%. document.documentElement is basically the same as document.getElementById("my_div"); after loading all the elements of the document, so how does the browser know how big the div should be when it does not have the right size of the client window in the first place?

I tried to run my code inside window.addEventListener("load",function(event_){ //My Code }); but these values ​​will not be generated. Is there a page load event that appears after window.onload ?

If someone tells me why only the Firefox mobile seems to display this strange behavior, I will give you a mental five.

Here are some sample code to recreate 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>

My Firefox for the Android version is 35.0.1. My version of Android is 4.4.4. On my device, Firefox displays "980" in the output element p, displays a warning, and displays "980" again. After updating the page, the first two steps remain unchanged, but the output after the warning changes to 360. This also happens with document.documentElement.clientWidth . There are no properties that I am trying to get in order to get the correct values. It seems that Firefox has some delay after loading the page before it gets access to the client window sizes ...

I tried the verge.airve.com plugin without jQuery and its initial feedback remained at 980. It was also initialized as 980 on Chrome, which was strange because Chrome worked as expected without it ...

After much debate, a solution was found! Firefox apparently resizes the window after it loads (I think for a good estimate, who really knows)! Thus, by adding a resize event handler in addition to window.onload, this problem can be prevented! See the accepted answer below for more details.

+7
javascript html css firefox default
source share
4 answers

Make sure your measurement is taken when the entire document is loaded and modified.

 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>
+7
source share

The problem (innerWidth === 980) persists for Firefox 40.0 under Android 4.4.4. Waiting in 1 ms - bypass. Replace

  window.onload = myProgram;
on
  window.onload = function () {setTimeout (myProgram, 1)};

In the meantime, I ran into this problem by adapting a rather complex site to small screens. Firefox obeys CSS, following "only @media screen and (max-width: 768px)". However, when you try to install event handlers depending on the width of the device, Firefox fails. I needed the aforementioned trick with a 0.5 second wait in all the places where I took the width of the device. This wait time was necessary for Nexus 7 (2012), but who knows what it takes for other devices?

+1
source share

I can confirm this problem, for example, in Firefox 38.0.1 on Android 4.1.2. Created js bin for testing purposes.

I would like to check window.innerWidth for user manipulations with the DOM at different resolutions (size of mobile phone, tablet and desktop), so it would be important to get the correct window.innerWidth value already in document.ready () and not just in 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>

(I wanted to add only a comment and not reply, but so far there are no reputations :-)

0
source share

I encountered the same problem when using BrowserComponent in CodeNameOne and Android

My solution was to put js inside such a function

 function runScripts() { //get width here }

And listen to the onLoad BrowserComponent event to execute this script after the browser has fully loaded

So:

  BrowserComponent browser = new BrowserComponent(); browser.addWebEventListener("onLoad", new ActionListener() { public void actionPerformed(ActionEvent evt) { browser.execute("runScripts()"); } }); browser.setURL("http://www.URL.com");

The handling of window.onload in html was insufficient to wait for the corresponding width to be served

Besides this solution, I also found that window.setTimeout(runScripts, 500); works to get the correct width of the document due to the loss of half a second

0
source share

More articles:


All Articles