Question

我目前正在创建一个桌面网站（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/events.html

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

有没有办法做到这一点？

非常感谢帮助。

谢谢，Dougie：）

Answer 1

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

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