title: Safari Responsive Design Mode CSS media query 'device' not applied
body: <p>I have been using the Safari Responsive Design Mode while developing and debugging a responsive Website I am working on. </p>
  
  <p>When setting to any mobile device (e.g. any iPhone or iPad), I was expecting a media query like this</p>
  
  <pre><code>@media screen and (max-device-width: 480px) {
      .disappear-on-device {
          display: none;
      }
  }
  </code></pre>
  
  <p>to fire and style elements with the <code>disappear-on-device</code> class and on devices with width &lt;= 480 accordingly, since the RDM can be specifically set to emulate an iPhones and iPads. </p>
  
  <p>The styling is, however, not happening. Chrome responsive design mode seems to be handling this just fine. I have not been able to find anything related in the Safari preferences. </p>
  
  <p>Am I missing something here? Is there a way to make Safari RDM act like an actual device?</p>