WKWebView：当多个元素在同一文档中使用该大小时，某些大小范围内的文本以错误的大小呈现
Posted
技术标签:
【中文标题】WKWebView：当多个元素在同一文档中使用该大小时，某些大小范围内的文本以错误的大小呈现【英文标题】：WKWebView: Text rendered at wrong size for certain size ranges when multiple elements use that size in the same document 【发布时间】：2018-12-31 22:15:19 【问题描述】：我知道这听起来很疯狂。请看以下截图：
这两个屏幕截图是WKWebView 渲染完全相同的文件。唯一的区别是，在第二个中，我复制了您在第一个中看到的八个 div（完整的 html下面）。
为了清楚起见，第二张截图有两个问题：
-
大小在22px和28px之间，文字都莫名渲染成同样大小，而且
介于 16 像素和 26 像素之间的文本的实际大小与第一个屏幕截图中的不同，并且不正确。问题似乎在 30px 标记处消失。 （对于它的价值，我也尝试使用
pt 单位，结果相似。）
这是我的整个 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>Repro</title>
</head>
<body>
<div style="font-size:16px;">The quick fox jumps (16).</div>
<div style="font-size:18px;">The quick fox jumps (18).</div>
<div style="font-size:20px;">The quick fox jumps (20).</div>
<div style="font-size:22px;">The quick fox jumps (22).</div>
<div style="font-size:24px;">The quick fox jumps (24).</div>
<div style="font-size:26px;">The quick fox jumps (26).</div>
<div style="font-size:28px;">The quick fox jumps (28).</div>
<div style="font-size:30px;">The quick fox jumps (30).</div>
<div style="font-size:16px;">The quick fox jumps (16).</div>
<div style="font-size:18px;">The quick fox jumps (18).</div>
<div style="font-size:20px;">The quick fox jumps (20).</div>
<div style="font-size:22px;">The quick fox jumps (22).</div>
<div style="font-size:24px;">The quick fox jumps (24).</div>
<div style="font-size:26px;">The quick fox jumps (26).</div>
<div style="font-size:28px;">The quick fox jumps (28).</div>
<div style="font-size:30px;">The quick fox jumps (30).</div>
</body>
</html>
需要明确的是，这个问题只需两行即可重现。简单地在“问题范围”内使用相同的字体大小两次会导致问题重现。换句话说：
<div style="font-size:22px;">The quick fox jumps (22).</div>
<div style="font-size:22px;">The quick fox jumps (22).</div>
...是复制品，但除非您希望文本具有一定大小，否则您可能不会注意到。
这是添加 WKWebView 并加载内容的代码（来自viewDidLoad）：
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.pnlContent.frame configuration:configuration];
webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
webView.translatesAutoresizingMaskIntoConstraints = true;
[self.pnlContent addSubview:webView];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
[webView loadFileURL:url allowingReadAccessToURL:url];
我能够确定的几件事：
如果我删除视点标记，或者具体来说，如果我从content 属性中删除与比例相关的任何内容，问题就会消失。
该问题仅出现在横向模式下，而不是纵向模式。
如果不让浏览器填充其父级，问题就会消失（我已经尝试使用 translatesAutoresizingMaskIntoConstraints 以及手动添加 AutoLayout 约束 - 都是一样的。）
我在这里束手无策。请帮忙！
【问题讨论】：
可能是text-size-adjust 导致了这个错误？
@mattsven 是的！添加-webkit-text-size-adjust: none 确实可以解决这个问题。谢谢！我仍在调查我的大型项目中的一些奇怪问题（例如，不是简化的复制项目）。此属性的应用似乎不一致。但是，我当然认为我现在走在正确的轨道上。非常感谢！
你明白了。您可能想自己回答问题，以防其他人遇到同样的问题。
好的，很酷。如果你想要答案的分数，我不想把它从你身上拿走。如果您在几天内没有先这样做，我会进行更多研究并发布答案。
请随意。无论如何，我认为您的回答会更明智。
【参考方案1】：
看来这里的罪魁祸首是text-size-adjust（非常感谢@mattsven 在这里的帮助）。
您可能希望同时使用text-size-adjust 和特定于供应商的-webkit-text-size-adjust。
如果它对任何人有帮助，当我在body 级别添加它时，它似乎并没有统一应用于我的文档，尽管我认为它可能会因为zoom:0.5 而变得复杂我在@987654327 @level（长篇大论）。但是，就其价值而言，我发现如果我将它专门应用于遇到我在原始问题中描述的奇怪渲染问题的类，我能够纠正这个问题。
希望这对某人有所帮助！
【讨论】：
我还会抛出一些关于为什么会发生这种情况的信息，以供其他人好奇：text-size-adjust 的默认值为auto，它启用了 Mobile Safari 的文本膨胀算法。按照您上面的示例，该算法似乎是一个。将所有字体大小缩放一个因子f（但这是确定的）和 b。强制使用最大字体大小（在上面的示例中，即22 * f）以上是关于WKWebView：当多个元素在同一文档中使用该大小时，某些大小范围内的文本以错误的大小呈现的主要内容，如果未能解决你的问题，请参考以下文章