Skip to content

Instantly share code, notes, and snippets.

@skahack

skahack/index.html

Created January 22, 2016 08:37
Show Gist options
  • Save skahack/971edf3f5d1e950577ad to your computer and use it in GitHub Desktop.
Save skahack/971edf3f5d1e950577ad to your computer and use it in GitHub Desktop.
Download ZIP
iOS 9 Safari - workaround
Raw
index.html
<!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>
Raw
workaround.js
(function(){
var elm = document.createElement('span');
elm.offsetHeight;
elm = null;
})();
@DaveFlash
Copy link

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