如何在 iOS 5 和 iOS 6 上修复有问题的 webkit-text-size-adjust？
Posted
技术标签:
【中文标题】如何在 iOS 5 和 iOS 6 上修复有问题的 webkit-text-size-adjust？【英文标题】：How to fix buggy webkit-text-size-adjust on iOS5 and iOS6? 【发布时间】：2012-10-31 13:53:09 【问题描述】：在 ios 5 和 iOS 6 下的 UIWebView 中使用 -webkit-text-size-adjust 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>
属性-webkit-text-size-adjust 的值50% 应该减小（减少50%）整个文本的大小。同时减小both字体大小和行高是有意义的，否则文本会看起来很丑陋。现在，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 的行为是减少 both 字体大小和行高值， -- 即使行高值在 百分比。 （这似乎是一个错误。）因此，iOS 6.0 将显示此文本，就好像我写了font-size: 1em; line-height: 75%;。结果是行高被计算为字体大小的 75%，即文本行非常靠近，几乎重叠。
iOS 6.0 上的解决方案是写line-height: 3em;。但这不适用于 iOS 5.1。
我认为没有对 iOS 版本敏感的 CSS 属性...如何让我的应用程序在两个 iOS 版本上都运行？
【问题讨论】：
目前没有找到解决办法；提交给 Apple 的错误报告。 这很烦人。 到目前为止，我想到的只是我可以在 HTML 文档中动态设置 line-height 属性（使用[webview stringByEvaluatingjavascriptFromString:]）。所以我写了非常难看的代码，首先读取 line-height 的初始值，然后将它作为另一个属性存储在 HTML 文档中，然后每次动态重新计算新的 line-height 属性。 javascript代码很多，比较脆，只能同时支持iOS 5.x和iOS 6.x。
另一种解决方法：用Javascript获取WebView的用户代理，解析结果。用户代理应该包含一些关于我们是在 iOS 5 还是 iOS 6 下运行的指示。然后 Javascript 代码可以相应地设置 CSS 属性。由于时间不够，我还没有测试这个解决方案。它仍然是脆弱的 JS 代码，但至少不需要原生代码来区分 iOS 5 和 iOS 6。
你试过用 css "line-height" 写两次吗？首先是 3em，下一行是 150%（或相反的顺序），看看 5.1 和 6.0 会发生什么？
【参考方案1】：
你有没有试过这样设置 line-height:1.5 。它相当于 3 和 2em 字体，但告诉设备将行高渲染为比字体大 1.5 倍，而不是硬编码的 em 值。
编辑： 仍然不认为这是一个错误。我认为您在触发 size-adjust 之前告诉 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>
【讨论】：
【参考方案2】：关于你的问题，我已经以一种非常非常丑陋的方式解决了这个问题：
在启动时，我获得了 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.
【讨论】：
以上是关于如何在 iOS 5 和 iOS 6 上修复有问题的 webkit-text-size-adjust？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 11 上修复 UILabel intrinsicContentSize
CSS 位置问题：在 iOS 9 iPhone 6+ 中以横向模式修复