Skip to content

Instantly share code, notes, and snippets.

@skahack
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
Copy link

LindseyWhitney commented Mar 12, 2016

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

@DaveFlash
Copy link

DaveFlash 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