bir*_*dus 23 css smartphone font-size media-queries
我正在调整一个网页,以便它在智能手机上看起来不错.我在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中查看该页面.
此外,当我在以下模拟器中查看此页面时,整个页面上的所有字体都很小 - 太小而无法读取.
首先,为什么页面底部的商标字体显示比页面其他部分的字体小得多(Android上的Chrome)？
其次,为什么在iPhone模拟器中所有字体都显得如此之小？
我所要做的就是在所有智能手机上以清晰易读的尺寸显示所有字体.
更新:
当我明确指定字体大小时,我遇到了同样的问题.例如,如果我为主要字体指定13px,我必须在商标上指定大约30px的内容,以使其显示为相似的大小.
如果我使用"em",同样的事情.
更新:
我只是在我的三星Galaxy S2上的默认(我认为)浏览器中进行了测试,它显示了很小的字体,太小了,它难以辨认.顺便说一下,在默认的Adroid浏览器中,我可以双击,它会扩展到一个不错的大小.
试过这个并没有什么区别:
body {
-webkit-text-size-adjust: none;
}