-webkit-text-size-adjust在iOS 5和iOS 6下的UIWebView中使用CSS属性时,我得到的线条高度不正确.在iOS 5和iOS 6中似乎存在一个错误,但行为不同,我正在尝试修复演示文稿它适用于所有IOS版本.
我想要实现的目标:我将以下HTML代码加载到UIWebView中.代码仅设置所有文本的字体大小,行高和文本大小调整.
<html><head>
<style language="text/css">
body {
-webkit-text-size-adjust : 50%;
}
p {
font-size: 2em;
line-height: 3em;
/* line-height: 150%; */
}
</style>
</head><body>
<p>Text text text... </p>
</body>
Run Code Online (Sandbox Code Playgroud)
属性的50%值-webkit-text-size-adjust应减少(减去50%)整个文本的大小.这是有道理的,以减少双方的字体大小,并在同一时间线上的高度,否则文本看起来很丑陋.现在,似乎iOS 5.1和iOS 6都没有这样做.(在我的应用程序中,我必须使用该属性,-webkit-text-size-adjust因为用户应该能够更改文本大小.)
iOS 5.1的行为是减小字体大小; 线高保持相同的值.所以iOS 5.1会像我写的那样解释上面的HTML font-size: 1em; line-height: 3em;.iOS 5.1上的UIWebView将显示小文本,行之间有巨大的间隙.
iOS 5.1的解决方案是写line-height: 150%;而不是line-height: 3em.然后iOS 5.1保持line-height值不变为150%,而字体大小减少.因此文本显示是正确的.
的iOS 6.0的行为,从我的测试以下,是为了减少双方的字体大小和行高值, -即使行高值在给定的百分比.(这似乎是一个错误.)因此,iOS 6.0将显示此文本,就像我写的一样font-size: 1em; line-height: 75%;.结果是行高被计算为字体大小的75%,即文本行非常接近,它们几乎重叠.
iOS 6.0上的解决方案是编写line-height: 3em;.但这不适用于iOS 5.1.
我不认为有一个对iOS版本敏感的CSS属性...如何使我的应用程序在两个iOS版本上都能正常工作?
你有没有尝试过这样设置{ line-height:1.5 }。它相当于 2em 字体的 3,但告诉设备以比字体大 1.5 倍的高度渲染行高,而不是硬编码em值。
编辑:仍然不认为这是一个错误。我认为在触发尺寸调整之前你没有告诉 CSS 足够多的信息。
以下代码在 iOS 5.1 和 6.0 中看起来相同:
html { font-size:40px }
body {
font-size:0.5em; /* without this.. */
-webkit-text-size-adjust : auto; /* 50% is arbitrary */
}
p {
font-size: 2em;
line-height: 1.5;
margin-bottom:3em;
}
<p>Text text text...</p>
<p>Text text text...</p>
<p>Text text text...</p>
<p>Text text text...</p>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3160 次 |
| 最近记录: |