HTML/CSS：移动设备中的表格字体大小不同答案

【问题标题】：HTML/CSS: table font size different in mobile deviceHTML/CSS：移动设备中的表格字体大小不同
【发布时间】：2015-01-20 08:38:49
【问题描述】：

我想有一个简单的网站，可以在桌面和移动浏览器上运行，但遇到了一个奇怪的（菜鸟）问题：当我有一个列文本长度不同的表格时，在移动设备中呈现的字体大小是截然不同。知道为什么会发生这种情况，什么是快速干净的解决方法？提前感谢您的帮助！

HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
     body {
       font-family: Verdana, Geneva, Arial, sans-serif;
       font-size: medium;
     }
     table, td {
       border: 1px solid black;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Short text. Short text</td>
        <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td>
      </tr>
    </table>
  </body>
</html>

在桌面浏览器上显示正常

移动浏览器上的奇怪字体大小（chrome 模拟器）

【问题讨论】：

你指的是什么模拟器？这似乎是模拟器中的一个错误，而不是其他任何东西。
我使用的是 Google Chrome 移动模拟器，不，这不是错误 --- 我在智能手机上看到了相同的渲染效果（这就是我着手修复它的原因）。跨度>
你说得对，这种奇怪现象确实发生在 Android 上的 Chrome 中（答案中建议的 meta 标签解决了这个问题）。

标签： html css font-size mobile-browser

【解决方案1】：

您需要考虑设置应用程序的viewport。要制作适合移动设备的 Web 应用程序，您需要在标题中进行设置。您可以通过在 <head> 标签之间添加 <meta> 标签来实现。这是一个例子：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

有关什么是视口以及如何使用视口的完整描述，您可以访问 Apple Developer 的文章 Configuring the Viewport，因为它是首次为 Safari Mobile 引入的。

【讨论】：

感谢@Abel，但更改字体大小并不能解决我的问题 --- 模拟器在两列上仍然有不同的字体大小。
@YingXiong 看看我编辑的答案是否适合你
是的，<meta> 标签更正了渲染。如果您能在该标签上添加更多解释，我将不胜感激！
字体大小设置与问题无关。
我刚刚编辑了答案并删除了其中不必要的部分。现在它只是简单的解决方案。

【解决方案2】：

最终你可能还需要

text-size-adjust: none;
-webkit-text-size-adjust: none;

确保文本不会根据表格单元格的大小而变大或变小。尤其是在 iOS 上的 Safari 中，我发现这是相关的。

【讨论】：

【解决方案3】：

试试这个

 body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 15px;
}

【讨论】：

谢谢@Reza，但设置字体大小并不能解决我的问题。