移动端浏览器中CSS无法控制文本大小问题求助

这是Chrome移动端的**文本自动缩放（Text Autosizing）**特性导致的问题。Chrome会根据容器宽度、内容长度自动调整字体大小以优化移动端可读性，但在你的布局中，表格元素被触发了自动缩放，导致字体和body不一致。

解决方法 #

方法1：全局禁用文本自动缩放 #

在HTML的<head>中添加viewport元标签，明确控制缩放行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, text-size-adjust=100%">

或者针对元素单独设置兼容多浏览器的CSS：

body, td {
  font-size: 34px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

方法2：强制表格文本继承字体大小 #

给表格单元格添加明确的字体继承规则，同时禁用自动缩放：

td {
  font-size: inherit;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

为什么缩短h2或移除最后一行会恢复正常？ #

Chrome的文本自动缩放算法会根据页面整体内容的长度、容器宽度判断是否需要调整字体。当你缩短h2或移除最后一行文本时，页面内容长度变化，算法判定无需缩放，因此字体恢复和body一致。代码片段查看器中正常，是因为它的iframe环境默认可能禁用了该特性或有不同的viewport配置。

修改后的完整代码示例：

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, text-size-adjust=100%">
<style>
body {font-size:34px;}
td {
  font-size: inherit;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
</style>
</head>

<body>
<h2>Camera - If this line is shortened to 3 words the problem goes away</h2>

<table border=1>
  <tr>
    <td>
      Camera - this text in table data is different size (length doesn't matter)
    </td>
  </tr>
</table>

Camera FOV: <br/>
Camera if this line is removed, issue is gone<br/>

</body>

内容的提问来源于stack exchange，提问作者gr5