表格中的字体在移动浏览器上呈现不一致答案

【问题标题】：fonts in tables rendering inconsistently on mobile browsers表格中的字体在移动浏览器上呈现不一致
【发布时间】：2014-03-28 01:12:06
【问题描述】：

我目前正在创建一个桌面网站 (http://www.robtest.org.uk)，我希望该网站能够与移动浏览器很好地配合使用，以减少创建单独的移动网站的需要。移动 Safari 似乎可以放大大块文本的字体（这很好）。问题在于我用于内容而不是布局的表格。宽列中的字体被放大以使其可读，而较小宽度列中的字体被忽略。

我目前一致呈现表格的解决方法是：

@media only screen and (max-device-width: 480px) {      
    #container td { -webkit-text-size-adjust:100% }}

它适用于以下页面： http://www.robtest.org.uk/audio_catalogue.html

但它不适合包含我们的活动详细信息的表格，例如： http://www.robtest.org.uk/events.html

在后者中，我宁愿放大所有字体，以使页面保持一致，而不仅仅是右侧列。

有什么办法吗？

非常感谢您的帮助。

谢谢，道吉 :)

【问题讨论】：

你脑子里有元视口标签吗？
没有。我应该有吗？ :S

标签： html css

【解决方案1】：

在页面的<head> 部分添加视口标签，这将有助于防止设备缩放/缩放，并在移动设备上为您提供统一的外观

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

【讨论】：

好的，我刚刚完成了。现在它只在点击链接时显示屏幕的左上角，但移动 Safari 仍然会不一致地缩放表格中的字体。
我猜这是因为它是一个固定宽度的布局，而不是一个完整的响应式设计......
是的，如果你想要一个跨平台的外观，你必须做一个完整的响应式设计，%s & ems 而不是固定的 pxls