为什么 Rem 高度在 Chrome 设备仿真（和移动设备）中缩放
Why Rem height is scaling in Chrome Device Emulation (and mobile devices)
Please see my demo video: https://youtu.be/8BQ_UgMGK2E
我确信 rem 对组件很好，em 对子组件很好，但似乎我的 height:5rem 对应的不是根 font-size:16px
我不明白为什么设备/移动仿真似乎会缩放根字体大小，因为 rem 应该在 16px 上保持一致，无论屏幕上有多少像素
- Meta 标签只是说 charset utf 8
window.devicePixelRatio是一致的2
Josh Crozier 提到的答案是添加
<meta name="viewport" content="width=device-width, initial-scale=1">
在 index.html <head> 部分
正如我在上面的评论中提到的，您可以通过向文档的 head 元素添加 viewport meta tag 来解决此问题。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1">
这样一来，您就可以控制浏览器视口的宽度和缩放比例。如果此标记的 content 值为 width=device-width，则屏幕宽度将与设备独立像素匹配，并确保所有不同设备的缩放和行为一致。
更具体的信息，这里是我回答的a related question。答案更详细地介绍了 max-width 和 max-device-width 之间的区别。
Please see my demo video: https://youtu.be/8BQ_UgMGK2E
我确信 rem 对组件很好，em 对子组件很好，但似乎我的 height:5rem 对应的不是根 font-size:16px
我不明白为什么设备/移动仿真似乎会缩放根字体大小，因为 rem 应该在 16px 上保持一致，无论屏幕上有多少像素
- Meta 标签只是说 charset utf 8
window.devicePixelRatio是一致的2
Josh Crozier 提到的答案是添加
<meta name="viewport" content="width=device-width, initial-scale=1">
在 index.html <head> 部分
正如我在上面的评论中提到的，您可以通过向文档的 head 元素添加 viewport meta tag 来解决此问题。
例如：
<meta name="viewport" content="width=device-width, initial-scale=1">
这样一来，您就可以控制浏览器视口的宽度和缩放比例。如果此标记的 content 值为 width=device-width，则屏幕宽度将与设备独立像素匹配，并确保所有不同设备的缩放和行为一致。
更具体的信息，这里是我回答的a related question。答案更详细地介绍了 max-width 和 max-device-width 之间的区别。