代码之家 › 专栏 › 技术社区 › Ryano

iPhone的字体大小问题

mobile-safari mobile css html iphone

Ryano · 技术社区 · 16 年前

我目前正在开发一个网站的移动版本,一切都很好,在iPhone、黑莓和Android上都可以正常工作。

我有一个小问题,不是什么大问题,但仍然有点烦人。我有:

<h1>
<h2> 标签设置为12px和粗体
<p> 标签设置为12px和正常

现在,在iPhone上进行纵向查看时,一切看起来都很棒,但当设备旋转到横向时 < 标题变小了(很难说,但可能比 <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;
}

3 回复 | 直到 12 年前

Barrie Reader 16 年前

我相信您正在CSS中查找:

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

Community Mohan Dere 9 年前

更好的解决方案是使用100%而不是无,正如user612626在旧线程中所述: Font size rendering inconsistencies on an iPhone

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

这样桌面webkit浏览器也可以按比例调整大小和缩放。我认为这是一个比按屏幕大小过滤更好的方法。

AlexD Cameron Ketcham 13 年前

正如Neurofluxation的回答中所述,您可以使用css规则webkit text size adjust,但要注意,这可能会阻止用户在桌面webkit上调整字体大小(参见 this article 更多细节)。

有鉴于此,通过CSS3媒体查询(或用户代理)检查安全性可能是值得的。

例如。,

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

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

1 年前

routern · 如何组合contextMenu和圆角矩形?

1 年前

juanmartin · 无法修改iOS应用程序沙盒之外的文件。权限问题

2 年前

DevHome98 · 3D触摸不适用于设备swift

2 年前

dunoiww · 从全屏返回时如何触发onAppear

2 年前

Community wiki · iPhone上ivar的继承问题

2 年前

Community wiki · iphoneos4应用程序无法在ipodtouchos3上运行+

3 年前

Community wiki · 查找iOS日历

3 年前

Community wiki · 有效的IPhone编程技术[关闭]

3 年前

Umair Khan · SwiftUI重新绘制数据更改的整个视图-仅需要重新绘制特定零件

3 年前