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

Question

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

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

That does seem odd.. What does your viewport meta tag look like? — Josh Crozier, Feb 17 '17 at 00:58
No.. It sounds like you don't have [a viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) meta tag specified... try adding ``. — Josh Crozier, Feb 17 '17 at 01:11

score 2 · Accepted Answer · edited May 23 '17 at 11:46

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.

score 0 · Answer 2 · answered Feb 17 '17 at 05:21

0

The answer, as mentioned by Josh Crozier is to add

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

in the index.html <head> section

answered Feb 17 '17 at 05:21

neaumusic

10,027
9
55
83

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

2 Answers2