移动端仅表格内字体大小异常的原因与解决方法

• Chrome的移动端模式（包括DevTools响应式模式）在处理未设置视口标签的本地HTML文件时，会触发默认的字体缩放优化：为了让表格内容在有限的移动设备宽度内完整显示、避免横向滚动，浏览器会自动缩小表格内的文本字号。
• 在线平台（如jsfiddle）通常会自动为页面注入视口配置，所以不会出现这个问题；而本地文件打开时没有这个默认配置，因此复现了字体大小差异。

1. 添加视口元标签（最推荐） #

在HTML的<head>中添加视口标签，明确让浏览器以设备宽度渲染页面，取消自动字体缩放：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! 

<table>
<tr>
<td>Text in the column</td>
</tr>
</table>
</body>
</html>

2. 强制表格文本继承父字体大小 #

通过CSS让表格内的文本强制继承<body>的字体大小，覆盖浏览器的自动调整：

<html>
<head>
    <style>
        table, td {
            font-size: inherit;
        }
    </style>
</head>
<body>
<!-- 原内容不变 -->
</body>
</html>

3. 禁用浏览器文本大小调整 #

使用CSS属性直接禁用浏览器对表格文本的自动缩放：

<html>
<head>
    <style>
        td {
            -webkit-text-size-adjust: 100%; /* 适配Chrome等WebKit内核浏览器 */
            text-size-adjust: 100%;
        }
    </style>
</head>
<body>
<!-- 原内容不变 -->
</body>
</html>

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