Question

我希望有一个简单的网站可以在桌面和移动浏览器上运行，并遇到一个奇怪的（菜鸟）问题：当我有一个列文本长度不同的表时，在移动设备中呈现的字体大小是截然不同。知道为什么会这样，以及什么是快速和干净的解决方案？在此先感谢您的帮助！

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>

在桌面浏览器上呈现正常

desktop

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

mobile

Answer 1

您需要考虑设置应用的视口。要制作适合移动设备的Web应用程序，您可能需要在标题中进行设置。您可以在<meta>代码之间添加<head>代码。这是一个例子：

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

有关视口内容及其使用方式的完整说明，您可以访问Apple Developer首次为Safari Mobile推出的文章Configuring the Viewport。

Answer 2

最终您可能还需要

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

，以确保不会根据表单元格的大小来放大或缩小文本。特别是在iOS上的Safari中，我发现这很重要。

Answer 3

试试这个

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

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

3 个答案: