为啥字体大小（和其他元素）在移动设备上显得如此之小

Posted 2023-03-06

【中文标题】为啥字体大小（和其他元素）在移动设备上显得如此之小

【英文标题】：Why font sizes (and other elements) appear so small on mobile devices为什么字体大小（和其他元素）在移动设备上显得如此之小

【发布时间】：2012-01-08 01:50:06

【问题描述】：

我正在尝试为移动设备（例如 - iphone）创建一个特殊的样式表。

我在主样式表中有这样一条规则：

body

    font-family: arial,georgia,"times new roman",times,serif;
    font-size: 12px;
    line-height: 18px;

对于某个标题：（我所有的字体大小都在 em 中，除了定义所有的正文）

#header #PageTitle h1
    font-size: 4.5em;

当我在 iphone 上看到大标题时，它看起来很小 - 我应该怎么做才能看到更大尺寸的它？我如何将规则应用于所有元素以“只是大两倍”（我尝试调整 body 的字体大小，但没有奏效）。

我做错了什么，应该如何正确完成？

【参考方案1】：

我会将body 设置为1em，然后相应地设置标题等。

【参考方案2】：

-webkit-text-size-adjust: none | auto | <percentage>;

所以，两倍大：-webkit-text-size-adjust: 200%;

【讨论】：

我试过这个，但在我的情况下，当我在 iphone 模拟器中运行应用程序时，问题仍然存在。

【参考方案3】：

我发现这段代码在 iphone 中禁用缩放：

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

我不确定这是否是正确的解决方案（它让一切看起来都太大了）——但这只是一半......

【讨论】：

在修复之前进行缩放的目的是什么？