When are the DOM window sizes complete?
I am having problems with my web application using window.innerWidth
and window.innerHeight
before they seem to stabilize. Everything works fine on my desktop, but I ran into this issue on several mobile devices (they all work with the current stable version of Chrome for Android). I have led everything to what I think is the easiest way to reproduce the problem:
<!DOCTYPE html>
<html>
<head>
<!--meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /-->
<!--meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /-->
<script type="text/javascript">
function dimen() {
alert("" + window.innerWidth + "x" + window.innerHeight);
}
window.onload = dimen;
setTimeout(dimen, 1000);
</script>
</head>
<body>
</body>
</html>
On my Nexus 7 I get the following results:
Without the viewport meta tag:
Bootstrapping:
- 980x1449 (usually)
- 980x1292 (sometimes)
Refresh:
- 980x1292
One second pause:
- 980x1292
With the first viewport meta tag:
Bootstrapping:
- 980x1449 (usually)
- 980x1292 (sometimes)
Refresh:
- 600x791
One second pause:
- 600x791
In the second views meta tag:
Bootstrapping:
- 980x1449 (usually)
- 980x1292 (sometimes)
Refresh:
- 600x791
One second pause:
- 600x791
Putting it all together, I see the following:
- Refreshing the page always gives consistent, stabilized dimensions.
- Waiting for one second will always give the same results.
- Initial results vary, but they are always different from the results I get when the situation stabilizes.
- The two viewport metadata give the same results as each other;
width=device-width
doesn't seem to matter. - The most dramatic difference is when one of the
window.onload
viewport meta tags is used , assuming the initial is fired before the viewport meta tag is applied to the document. But the differences are visible even without that tag, suggesting that it is still incomplete anyway when the code is first called.
I had similar results (different sizes, of course, but with the same overall pattern) on my Nexus 6, except that I once got "0x0" on boot.
Question
I would like to know how to make the application wait to use window.innerWidth
and window.innerHeight
until they complete what they are about to do. I tried waiting for an animation frame and somewhat surprisingly it didn't work. Obviously, waiting for a second one to start my application is undesirable, as the timeout value decreases until I find something that "normally works". Am I doing something wrong? Is there a best practice for knowing when these values are safe to access?
source to share
Maybe you can use jQuery with
$( document ).ready(function() {
console.log('DOM ready');
//your functions here
});
( http://api.jquery.com/ready/ )
If it's just a webapp you can use bootstrap as well. ( http://getbootstrap.com/ ) This is mobile technology. hope this helps a little.
source to share