Html iPhone 的字体大小问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3466434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font size issue with iPhone
提问by Ryano
Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
我目前正在开发一个网站的移动版本，一切都很好，在 iPhone、Blackberry 和 Android 上运行良好。
I have one slight problem, not a big deal but still a little annoying. I have:
我有一个小问题，不是什么大问题，但还是有点烦人。我有：
<h1>tags set to 18px and bold<h2>tags set to 12px and bold<p>tags set to 12px and normal
<h1>标签设置为 18 像素，粗体<h2>标签设置为 12 像素，粗体<p>标签设置为 12 像素和正常
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1>titles go smaller (hard to tell but possibly smaller than the <h2>tags?!
现在，在 iPhone 上纵向查看时一切看起来都很棒，但是当设备旋转到横向时，<h1>标题会变小（很难说，但可能比<h2>标签小？！
Here is my css:
这是我的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;
}
回答by Barrie Reader
I believe you are looking for this in your CSS:
我相信你正在你的 CSS 中寻找这个：
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
回答by Cazuma Nii Cavalcanti
A better solution can be using 100% instead of none, as stated by user612626 in an older thread: Font size rendering inconsistencies on an iPhone
更好的解决方案可以使用 100% 而不是无，如 user612626 在较旧的线程中所述： Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too. I think this is a better approach than filtering by screen size.
这样桌面 webkit 浏览器也可以按比例调整大小和缩放。我认为这是比按屏幕大小过滤更好的方法。
Hope it helps.
希望能帮助到你。
回答by AlexD
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this articlefor more details).
正如 Neurofluxation 的回答中所述，您可以使用 css 规则 -webkit-text-size-adjust 但请注意，这也会阻止用户调整桌面 Webkit 上的字体大小（有关更多详细信息，请参阅本文）。
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
鉴于此，可能值得通过 CSS3 媒体查询（或用户代理）进行检查以确保安全。
E.g.,
例如，
@media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
