为什么 EM 字体在 Android 移动设备上超小？
Why are EM font sizes super tiny on Android mobile?
我使用 em 作为字体大小。示例：
body {
font-size:16px;
}
h1 {
font-size:2em;
}
@media (max-width:860) {
body {
font-size:0.8em;
}
}
出于某种原因，我在 Android 移动设备上使用超小字体。这可能是什么原因造成的？我以前没有经历过这个。
截图
em 是相对于其直接或最近父级的字体大小。如果它的任何直接父级为 font-size 属性 设置了 low/high 值，那么它就容易受到巨大变化的影响。
相反，您应该使用 rem (root em) 相对于 [=13] 的字体大小=] 元素.
为了使您的 font-size 属性 正确应用，您需要确保 <head> 中的 viewport settings 正确。请注意 <meta name="viewport" ... > 应该是您的第一个元标记，以便应用于所有设备（如果不是第一个，有些会忽略它）。
由于您为 font-size 使用 em 值，因此它基于父容器，而不是 <body>。相反，您可以使用 rem 值，它代表 root em，其中 root 是 html 标签。所以请尝试以下操作：
CSS
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
@media (max-width:860) {
body {
font-size: 0.8rem;
}
}
You can learn more about CSS units at W3 School.
尝试在您的 header
中使用以下标签
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">
我使用 em 作为字体大小。示例：
body {
font-size:16px;
}
h1 {
font-size:2em;
}
@media (max-width:860) {
body {
font-size:0.8em;
}
}
出于某种原因，我在 Android 移动设备上使用超小字体。这可能是什么原因造成的？我以前没有经历过这个。
截图
em 是相对于其直接或最近父级的字体大小。如果它的任何直接父级为 font-size 属性 设置了 low/high 值，那么它就容易受到巨大变化的影响。
相反，您应该使用 rem (root em) 相对于 [=13] 的字体大小=] 元素.
为了使您的 font-size 属性 正确应用，您需要确保 <head> 中的 viewport settings 正确。请注意 <meta name="viewport" ... > 应该是您的第一个元标记，以便应用于所有设备（如果不是第一个，有些会忽略它）。
由于您为 font-size 使用 em 值，因此它基于父容器，而不是 <body>。相反，您可以使用 rem 值，它代表 root em，其中 root 是 html 标签。所以请尝试以下操作：
CSS
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
@media (max-width:860) {
body {
font-size: 0.8rem;
}
}
You can learn more about CSS units at W3 School.
尝试在您的 header
中使用以下标签<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">