HTML view tag is sometimes ignored in mobile Chrome on first visit
For my responsive website, I'm using the viewport meta tag to force the device to display the page at its "preferred" screen resolution (not the actual device resolution, but the "smallest" resolution with an initial scale of 1.0).
View meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
This seems to work well on all devices, but on Chrome mobile and sometimes IOS devices, the first / undisclosed visit does not immediately detect the device's "preferred" resolution, but conveys the actual screen resolution.
Setting to reproduce the error (in the chapter section of the page):
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
alert(window.innerWidth);
</script>
The first / non-targeted visit will display "980" for my Nexus 5, the second visit / update will display the desired "360".
Does anyone know how to get the window to use the start scale, without using javascript timeout or desktop traversal?
Edited: Checking window.innerWidth after window.onload returns the desired "preferred" width. This is my workaround for now ...
source to share
I found a solution: window.innerWidth somehow delays and returns the document width without resizing the window early in the page load. document.documentElement.clientWidth seems to have no problem calculating the window width early in the page load.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
// So use this to calculate device width rules before window.onload
alert(document.documentElement.clientWidth);
</script>
Note. You can use window.innerWidth later, eg. after window.onload.
source to share