css - 智能手机上的字体大小不一致

Question

我正在调整网页以使其在智能手机上看起来不错。我在 CSS 文件中声明了一个 @media 部分，这样我就可以指定该页面的字体大小。这是媒体部分:

@media screen and (max-device-width: 640px) {
    #TermsOfUse {
        padding: 0 2em 0 2em;
        margin-left: auto;
        margin-right: auto;
        color: #777;
        font: small sans-serif;
    }

    #TermsOfUse p {
        color: #777;
        font-weight: bold;
        font: small sans-serif;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #TermsOfUse #trademark_footer p {
        font: xx-large sans-serif;
    }
}

但是，字体大小显示不一致。我已经告诉它显示“小”字体，但有一个部分一直以更小的尺寸显示字体(底部的 id="trademark_footer")。使用“xx-large”甚至不会使字体与页面其余部分的“small”字体一样大。我正在 Android 版 Chrome 中查看页面。

此外，当我在以下模拟器中查看此页面时，整个页面上的所有字体都非常小——小到无法阅读。

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

首先，为什么页面底部的商标字体比页面其余部分(Android 上的 Chrome)上的字体小得多？

其次，为什么在 iPhone 模拟器中显示的所有字体都这么小？

我想要完成的就是在所有智能手机上以清晰的大小显示所有字体。

更新:

当我明确指定字体大小时，我遇到了同样的问题。例如，如果我为主要字体指定 13px，我必须在商标上指定大约 30px 的内容以使其以相似的大小显示。

如果我使用“em”也是一样。

更新:

我刚刚在我的 Samsung Galaxy S2 上的默认(我认为)浏览器中对其进行了测试，它也显示了微小的字体——小到难以辨认。顺便说一句，在默认的 Android 浏览器中，我可以双击，它会扩展到一个合适的大小。

尝试过这个，但似乎没有什么不同:

body {
    -webkit-text-size-adjust: none;
}

Answer 1

我查看了该页面的源代码，但看不到

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

当我查看我的 iPhone 时，它​​似乎根本没有缩放页面，这表明该设备正在解释页面的大小，因此所有媒体查询都不会生效。

添加视口(viewport)元标记应该会触发媒体查询和您正在寻找的字体更改。

info on the viewport tag