字体大小与iPhone的问题

我目前正在使用移动版本的网站，一切都很好，在iPhone，黑莓和Android上都能正常工作。字体大小与iPhone的问题

我有一个轻微的问题，没有什么大不了的，但仍然有点烦人。我有：

<h1>标签设置为18像素，大胆
<h2>标签设置为12像素，大胆
<p>标签设置为12像素，并在纵向观看时在iPhone上正常

现在一切都看起来不错，但是当该设备旋转为横向的<h1>冠军去更小的（很难说，但有可能比<h2>标签？

这里小是我的CSS：

h1 { 
color:#FFFFFF; 
font-size:18px; 
line-height:22px; 
font-weight:bold; 
margin-top:0px; 
} 

h2 { 
font-size:12px; 
color:#333333; 
font-weight:bold; 
margin-bottom:-5px; 
} 

p { 
color:#333333; 
font-size:12px; 
line-height:18px; 
font-weight:normal; 
}

来源

2010-08-12 Ryano

[当iPhone的方向从纵向变为横向时保留HTML字体大小]的可能重复（http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-从肖像到景观） – Blazemonger 2012-05-30 22:09:29

我相信你在你的CSS寻找这样的：

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
}

来源

2010-08-12 09:49:07

完美的作品！欢呼声，应尽快将答案标记为正确！ – Ryano 2010-08-12 09:51:09

谢谢!!!!!! – 2011-09-01 07:17:30

No problemo dude！ – 2011-09-02 09:03:33

正如Neurofluxation的回答说，你可以使用CSS规则-webkit-文字大小调整，但要注意，这可以防止用户调整桌面Webkit上的字体大小（更多详细信息，请参阅this article）。

鉴于此，可能值得通过CSS3媒体查询（或用户代理）检查是否安全。

例如，

@media only screen and (max-device-width: 480px) { 
    html { 
     -webkit-text-size-adjust: none; 
    } 
}

来源

2011-11-17 19:56:45 AlexD

一个更好的解决方案可以使用100％，而不是没有，作为一个老线程通过user612626指出： Font size rendering inconsistencies on an iPhone

body { 
    -webkit-text-size-adjust: 100%; 
}

这样桌面WebKit浏览器可以调整大小和缩放比例也是如此。我认为这是比屏幕尺寸过滤更好的方法。

希望它有帮助。

来源

2012-08-29 18:36:01

字体大小与iPhone的问题

回答

相关问题