SHARE
TWEET

Mobile Safari window width tests

a guest Jan 19th, 2016 729 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Viewport Test</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8.  
  9. <body>
  10.     <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.
  11.  
  12.     <ul id="info" style="background: pink; min-height: 30em;">
  13.         <li>&lt;= 767px ? <script>document.write(window.matchMedia('(max-width: 767px)').matches);</script>
  14.     </ul>
  15.  
  16.     <script>
  17.         function addLI(eventobj) {
  18.             var w = window.innerWidth,
  19.                 ul = document.getElementById('info'),
  20.                 li = document.createElement('li');
  21.             li.appendChild(document.createTextNode(eventobj.type+': '+w));
  22.             ul.appendChild(li);
  23.         }
  24.        
  25.         // 980
  26.         addLI({type:'body'});
  27.         // correct device-width (fires after window load)
  28.         setTimeout(addLI, 0, {type:'body'});
  29.  
  30.         // 980
  31.         window.addEventListener('load', addLI);
  32.         document.addEventListener('DOMContentLoaded', addLI);
  33.  
  34.         // correct device-width
  35.         window.addEventListener('resize', addLI);
  36.         ['DOMContentLoaded', 'load', 'scroll'].forEach(function(event){
  37.             var t;
  38.             var delay = (event == 'scroll') ? 300 : 0;
  39.             window.addEventListener(event, function(eventobj){
  40.                 clearTimeout(t);
  41.                 t = setTimeout(addLI, delay, eventobj);
  42.             });
  43.         });
  44.     </script>
  45. </body>
  46. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top