Wrong Value For Window.innerWidth During Onload Event In Firefox For Android?

March 20, 2023 Post a Comment

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 w

Solution 1:

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>

Solution 2:

The problem (innerWidth === 980) persists for Firefox 40.0 under Android 4.4.4. A 1 msec wait is a circumvention. Replace

window.onload = myProgram;

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

In the meantime I encountered this problem while adapting a fairly elaborate site to small screens. Firefox obeys the CSS following "@media only screen and (max-width: 768px)". However, when one tries to set event handlers depending on device widths, Firefox fails miserably. I needed the above trick with 0.5 second wait at all spots where I picked up the device width. This wait time was necessary for Nexus 7 (2012), but who knows what is needed for other devices?

Solution 3:

I can confirm the issue, for example in Firefox 38.0.1 on Android 4.1.2. Created a js bin for testing purposes.

I'd like to check window.innerWidth for custom DOM manipulations on different resolutions (mobile, tablet and desktop size), so it'd be important to get the correct window.innerWidth value already in the document.ready() state and not just only in the 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 answer, but no reputations yet to do so :-)

Baca Juga

Solution 4:

I was facing the same issue while using BrowserComponent in CodeNameOne and Android

My solution was to put the js inside a function like so

function runScripts()
{
    //get width here
}

And listen to the onLoad event of the BrowserComponent to execute this script once the browser has been fully loaded

like so:

    BrowserComponent browser = new BrowserComponent();
    browser.addWebEventListener("onLoad", new ActionListener() {

        public void actionPerformed(ActionEvent evt) {
            browser.execute("runScripts()");
        }
    });
    browser.setURL("http://www.URL.com");

Handling window.onload in the html wasn't enough to wait for the appropriate width to be served

Besides this solution I also found that window.setTimeout(runScripts, 500); works to get the right document width, at the expense of wasting half a second

Solution 5:

window.setTimeout(yourFunction, 1);

This did the job for me, 1ms is enough.

Html5 Code Review