css – 智能手机字体大小不一致

前端之家收集整理的这篇文章主要介绍了css – 智能手机字体大小不一致前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在调整一个网页,使其在智能手机上看起来不错。我已经在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”甚至不会使字体与页面其余部分中的“小”字体一样大。我正在Chrome浏览器中查看该页面

此外,当我在以下模拟器中查看此页面时,整个页面上的所有字体都很小,太小,无法读取。

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

首先,为什么页面底部的商标中的字体比页面其他部分(Chrome上的Android版)的字体小得多?

第二,为什么所有的字体在iPhone模拟器中显得如此之小?

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

更新:

当我明确指定字体大小时,我有同样的问题。如果我指定13px,例如,对于主要字体,我必须在商标上指定大约30px的东西,使其以相似的大小显示

同样的事情,如果我使用“em”。

更新:

我刚刚在三星Galaxy S2上的默认浏览器(我认为)测试它,并且显示了这个小字体,太小了。顺便说一下,在默认的Adroid浏览器中,我可以双击,并扩展到一个很好的大小。

试过这个,似乎没有什么不同:

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

解决方法

我看过那个页面的源头,我看不到

< Meta name =“viewport”content =“width = device-width,initial-scale = 1,maximum-scale = 1”/>

当我看着我的iphone时,似乎没有缩放页面,这表明设备正在解释页面的大小,因此没有一个媒体查询将生效。

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

info on the viewport tag

猜你在找的CSS相关文章