title: Safari: Media query not firing at the expected width
body: <p>I have written a CSS media query 
  like this - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 59.9375em) {
    .left {
     display: none;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works fine across all the browsers except Safari 10.0.4 and below.
  Safari seems to be handling the media queries differently. </p>
  
  <p>Other browsers seem to be taking the window.innerWidth as viewport width for triggering media queries, but safari seems to be taking document.documentElement.clientWidth as viewport width and triggers the media queries accordingly.</p>
  
  <p>I can see a difference of 15px between the actual and expected breakpoint.
  I am looking for a cross-browser way for dealing with this issue.
  Thoughts are welcome, thanks in advance.</p>