Skip to content

Instantly share code, notes, and snippets.

@skahack skahack/index.html
Created Jan 22, 2016

Embed
What would you like to do?
iOS 9 Safari - workaround
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/workaround.js"></script>
</head>
<body>
<p>Mobile Safari reports 980 width when loading, but the device width when called on scroll or resize event, or if called inside `setTimeout` function, even if the delay is 0.
<ul id="info" style="background: pink; min-height: 30em;">
<li>&lt;= 767px ? <script>document.write(window.matchMedia('(max-width: 767px)').matches);</script>
</ul>
<script>
function addLI(eventobj) {
var w = window.innerWidth,
ul = document.getElementById('info'),
li = document.createElement('li');
li.appendChild(document.createTextNode(eventobj.type+': '+w));
ul.appendChild(li);
}
// 980
addLI({type:'body'});
// correct device-width (fires after window load)
setTimeout(addLI, 0, {type:'body'});
// 980
window.addEventListener('load', addLI);
document.addEventListener('DOMContentLoaded', addLI);
// correct device-width
window.addEventListener('resize', addLI);
['DOMContentLoaded', 'load', 'scroll'].forEach(function(event){
var t;
var delay = (event == 'scroll') ? 300 : 0;
window.addEventListener(event, function(eventobj){
clearTimeout(t);
t = setTimeout(addLI, delay, eventobj);
});
});
</script>
</body>
</html>
(function(){
var elm = document.createElement('span');
elm.offsetHeight;
elm = null;
})();
@LindseyWhitney

This comment has been minimized.

Copy link

commented Mar 12, 2016

Another option that works (but not as well) is using shrink-to-fit=no in the meta tag.

@DaveFlash

This comment has been minimized.

Copy link

commented Jul 28, 2016

shrink-to-fit seems to make my site behave even more wonky than it already does

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.