25

我正在调整一个网页，使其在智能手机上看起来不错。我在 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 模拟器中都显示得这么小？

我想要完成的只是在所有智能手机上以清晰的尺寸显示所有字体。

更新：

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

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

更新：

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

试过这个，它似乎没有什么不同：

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

3 回答 3

60

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

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

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

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

视口标签上的信息

于 2013-05-16T00:49:39.620 回答
1

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

我http://inrix.com/traffic/Privacy用 iPhone4 (iOS 5.0.1) 打开，确实字体很小。

看看这个页面的@medias（你也可以看到HTML5 Boilerplate 的模板，你也可以从那里挖掘一些关于你的问题的东西）。我没有任何字体大小问题，并且我已经在 Chrome（版本 26.0.1410.64 m）、iOS 5.0.1（9A405）和 Android 2.3.6 上测试了上一个链接（在手机中）。也许你可以从那些@medias 中挖掘出一些东西。

我完全同意Vector 的回答 You should specify sizes when you want consistency，当你想要一致性时，你应该避免使用名字。

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

最后，作为替代选项，您可以下载并在您的 css 中嵌入字体：

@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; }

希望能帮助到你！

于 2013-05-17T20:14:02.243 回答
0

设置行高怎么样？

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

于 2013-05-20T17:04:25.273 回答