为什么 EM 字体在 Android 手机上非常小？答案

【问题标题】：Why are EM font sizes super tiny on Android mobile?为什么 EM 字体在 Android 手机上非常小？
【发布时间】：2017-07-13 23:39:40
【问题描述】：

我使用em 作为字体大小。示例：

body {
  font-size:16px;
}
h1 {
  font-size:2em;
}
@media (max-width:860) {
  body {
    font-size:0.8em;
  }
}

出于某种原因，我在 Android 移动设备上获得了超小字体。这可能是什么原因造成的？我以前没有经历过这种情况。

截图

【问题讨论】：

你能发布你的 HTML 和 CSS 吗？这样我们可以更彻底地检查这两个，我有几个想法，但想在回答之前缩小范围。
你可以在这里查看html/css：www.now.ee
font-size: 200%; 是否给你想要的东西？可能只是浏览器中的一个错误。
将此添加到<head> 部分为我解决了这个问题：<meta name="viewport" content="width=device-width, initial-scale=1.0">

【解决方案1】：

em 与其直接或最近的父级的字体大小有关。如果它的任何直接父级为font-size 属性设置了低/高值，这使得它容易受到剧烈变化的影响。

相反，您应该使用与<body> 元素的字体大小相关的rem (root em)。

为了正确应用您的font-size 属性，您需要确保<head> 中有正确的viewport settings。请注意<meta name="viewport" ... > 应该是您的第一个元标记，以便应用于所有设备（如果不是第一个则忽略它）。

【讨论】：

【解决方案2】：

由于您使用em 值作为font-size，它基于父容器，而不是<body>。相反，您可以使用 rem 值，它代表 root em，其中 root 是 html 标记。所以尝试以下方法：

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}
@media (max-width:860) {
  body {
    font-size: 0.8rem;
  }
}

您可以在W3 School 了解有关 CSS 单元的更多信息。

【讨论】：

@user3615851 您需要发布更多信息或代码。从您发布的代码和您链接的网站来看，这个解决方案应该可以工作。我查看了您的网站，看起来您已更改为 rem 值，并且在 Android / iOS 上一切正常。

【解决方案3】：

尝试在标题中使用以下标签

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">

【讨论】：