HTML/CSS:移动设备中表格字体大小不同

21

我希望有一个简单的网站,能在桌面和移动浏览器上都能正常工作。但是遇到了一个奇怪(新手)问题:当我有一个列文本长度不同的表格时,在移动设备上渲染的字体大小会显著不同。你知道这是为什么吗?是否有快速且干净的解决方法?感谢您提前的帮助!

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


你指的是哪个模拟器?这似乎是模拟器中的一个错误,而不是其他什么问题。 - Jukka K. Korpela
我正在使用Google Chrome移动模拟器,不是一个bug --- 我在我的智能手机上看到了相同的渲染效果(这就是为什么我开始修复它)。 - Ying Xiong
1
你说得对,这个奇怪的问题确实发生在安卓Chrome上(并且一个答案中建议使用meta标签来解决这个问题)。 - Jukka K. Korpela
3个回答

18

你需要考虑设置你的应用程序的视口。为了制作适用于移动设备的网络应用程序,你需要在你的头部信息中进行设置。你可以通过在<head>标签之间添加一个<meta>标签来实现。这是一个例子:

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

关于视口是什么以及如何使用,您可以访问苹果开发者中心的文章“配置视口”。此文章最初是为Safari移动版推出的。


谢谢@Abel,但更改字体大小并不能解决我的问题——模拟器在两列上仍然有不同的字体大小。 - Ying Xiong
@英雄,如果这样的话,请看一下我编辑后的回答是否适合您。 - Abel Callejo
2
没错,<meta>标签可以修正渲染。如果您能对该标签进行更详细的解释,我将不胜感激! - Ying Xiong
2
字体大小设置与问题无关。 - Jukka K. Korpela
1
我刚刚编辑了答案,删除了其中不必要的部分,现在只剩下了简单的解决方法。 - Abel Callejo
这是魔法! - Inti

9

最终你可能还需要

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

为确保文本不会随着表格单元格的大小而变大或变小,尤其是在 iOS 的 Safari 浏览器中,我发现这很重要。

已被接受的答案对我没有用,但这个有用。谢谢。 - Nyde

-1

试一下这个

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

1
谢谢,@Reza,但是设置字体大小并不能解决我的问题。 - Ying Xiong

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接