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”甚至不会使字体与页面其余部分中的“小”字体一样大。我在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”，也一样。

更新

我刚刚在我的三星Galaxy S2上的默认（我认为）浏览器中进行了测试，它显示了很小的字体，太小了，它难以辨认。顺便说一句，在默认的Adroid浏览器中，我可以双击，它会扩展到一个不错的大小。

试过这个并没有什么区别：

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

Answer 1

我已经看过那个页面的来源了，我看不到

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

当我查看我的iphone时，似乎根本没有缩放页面，建议设备正在解释页面的大小，因此没有任何媒体查询生效。

添加视口元标记应该触发媒体查询和您要查找的字体更改。

info on the viewport tag

Answer 2

这是一个很长的镜头，但它可能对你有所帮助。

我用iPhone4（iOS 5.0.1）打开http://inrix.com/traffic/Privacy，确实字体非常小。

看看这个page的@media（你也可以看到HTML5 Boilerplate's template你可以从那里挖掘一些关于你的问题的内容。我没有任何字体大小的问题，我在Chrome（版本26.0.1410.64 m），iOS 5.0.1（9A405）和Android 2.3.6上测试了以前的链接两个方向（在手机中）。也许你可以从那些@media中挖掘出一些东西。

我对Vector's answer You should specify sizes when you want consistency表示赞同，当您想要保持一致时，应该避免使用名称。

最后，这里有一些链接以获取更多信息：

最后作为备用选项，您可以在css中下载并嵌入font：

@font-face { 
    font-family: 'LiberationMonoRegular';
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'),
         url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; }

然后在你的重置中只使用你的字体：

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }

希望它有所帮助！

Answer 3

如何设置行高？

我通过不同的网页浏览器遇到了同样的问题，其中字体有不同的位置。我可以通过设置height和line-height来解决此问题。

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

3 个答案: