Mobile Safari window width tests

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Viewport Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</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>