title: Chrome mobile device screen emulator
body: <p>I'm a bit confused about how device screen emulation works in chrome and how to use it to write affordable media-query. e.g.</p>
  
  <pre><code>IPhone X
  Real device screen-size: 1125x2436px    
  Emulated device screen-size: 375x812px
  </code></pre>
  
  <p>I know that a resolution like that easily take two full-hd screen to be shown at 1:1 scale with the actual monitor resolution (pixel density), but the emulated res is not simply the result of a zoom-out, because if I zoom in or out the view, pixel size is about the same, and this make me think that chrome is suggesting me that the emulated resolution should be my reference for layout, like it is the real-device res.</p>
  
  <p>But if it is, how this resolution is calculated? Why I should use this instead of the actual device screen-size?</p>