Search code examples
cssmobilemedia-queriesfont-size

Why Rem height is scaling in Chrome Device Emulation (and mobile devices)

Please see my demo video: https://youtu.be/8BQ_UgMGK2E

I'm convinced that rem is great for components, and em for sub-components, but seemingly my height:5rem is corresponding to something other than root font-size:16px

I cannot figure out why device / mobile emulation seems to scale the root font-size, as rem should be consistent at 16px, regardless of how many pixels are on the screen

  1. Meta tag just says charset utf 8
  2. window.devicePixelRatio is a consistent 2
Solution

  • As I mentioned in the comments above, you can resolve this by adding a viewport meta tag to the head element of your document.

    For instance:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    In doing so, this allows you to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

    For more specific information, here is a related question that I answered. The answer goes into more detail regarding the difference between max-width and max-device-width.