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

我想要一个简单的网站，可以在桌面和移动浏览器上使用，并遇到一个奇怪的（菜鸟）问题：当我有一个列的文本为不同的长度，在移动设备中呈现的字体大小显着不同。任何想法为什么发生这种情况，什么是快速和干净的修复？在此先感谢您的帮助！HTML/CSS：移动设备中表格字体大小不同

的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

怪异的字体大小（铬模拟器）

mobile

来源

2014-11-22 Ying Xiong

模拟器什么你指的是？这似乎是模拟器中的一个错误，而不是其他任何东西。 – 2014-11-22 08:25:51

我使用的是谷歌浏览器移动模拟器，不，它不是一个bug ---我在我的智能手机上看到了相同的渲染效果（这就是我着手解决它的原因）。 – 2014-11-22 16:11:40

你是对的，这种奇怪的确发生在Android上的Chrome浏览器（并且在答案中提出的'meta'标签修复了这个问题）。 – 2014-11-22 18:49:09

你需要好考虑s设置您应用程序的视口。要制作适合移动设备的网络应用程序，您可能需要在标题中设置该应用程序。您可以在<head>标签之间添加<meta>标签。这里有一个例子：

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

对于一个什么样的视口以及如何使用它，你可以从苹果开发者访问文章Configuring the Viewport因为它首次引入了移动Safari浏览器的完整描述。

来源

2014-11-22 05:23:17

谢谢@Abel，但更改字体大小并不能解决我的问题---模拟器在两列上仍然具有不同的字体大小。 – 2014-11-22 05:31:44

@YingXiong看看我编辑的答案，如果它适合你 – 2014-11-22 05:44:31

是的，''标记纠正渲染。如果您可以在该标签上添加更多解释，我会非常感激！ – 2014-11-22 16:10:00

试试这个

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

来源

2014-11-22 07:34:18

谢谢，@Reza，但设置字体大小并不能解决我的问题。 – 2014-11-22 16:10:24

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

回答

相关问题