13

在 iOS 5 和 iOS 6 下的 UIWebView 中使用-webkit-text-size-adjustCSS 属性时，呈现的行高不正确。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>

属性的值 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 的行为是同时减小font -size 和 line-height 值——即使 line-height 值以percent给出。（这似乎是一个错误。）因此，iOS 6.0 将显示此文本，就好像我写了font-size: 1em; line-height: 75%;. 结果是行高计算为字体大小的 75%，即文本行非常靠近，几乎重叠。

iOS 6.0 上的解决方案是编写line-height: 3em;. 但这不适用于 iOS 5.1。

我认为没有对 iOS 版本敏感的 CSS 属性......如何让我的应用程序在两个 iOS 版本上都工作？

4

2 回答 2

1

你有没有试过这样设置{ line-height:1.5 }。它相当于 3 和 2em 字体，但告诉设备将行高渲染为比字体大 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>
于 2012-12-28T03:56:53.830 回答
0

关于您的问题，我以非常非常丑陋的方式解决了这个问题：

在启动时，我得到了 iOS 版本，并存储在我的应用程序部分中。比当我需要以不同于我的方式工作时

if(osVersion < 5){
// iOS 4.3 properly working code here
}
else if (osVersion < 6){
// iOS 5.0 and 5.1 properly working code here
}
else{
// iOS 6 properly working code here.
}
于 2013-01-08T21:20:31.460 回答