WKWebView：当多个元素在同一文档中使用该大小时，文本在某些大小范围内以错误的大小呈现

Question

我知道这听起来很疯狂。请查看以下屏幕截图：

这两个屏幕截图是 WKWebView 渲染 完全相同的文件。 唯一的区别是在第二个中，我复制了你看到的八个 div在第一个中（完整 HTML 下面）。

为清楚起见，第二张截图有两个问题：

大小在 22px 和 28px 之间，文本都莫名其妙地 以相同的大小呈现 ，并且
16px 和 26px 之间的文本的实际大小与第一个屏幕截图不同，并且不正确。问题似乎在 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>

需要说明的是，只需两行即可重现此问题。简单地在 "problem range" 中使用相同的字体大小两次会导致问题重现。换句话说：

<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 约束 - 这是一样的。）

我在这里束手无策。请帮忙！

Answer 1

看来罪魁祸首是text-size-adjust（非常感谢@mattsven 的协助）。

您可能希望同时使用 text-size-adjust 和特定于供应商的 -webkit-text-size-adjust。

如果它对任何人有帮助，当我在 body 级别添加它时，它似乎并没有统一应用于我的文档，尽管我认为 zoom:0.5 可能会使它变得复杂我在 body 级别（长话短说）。但是，就其价值而言，我发现如果我将它专门应用于遇到我在原始问题中描述的奇怪渲染问题的类，我就能够纠正该问题。

希望这对某人有所帮助！

WKWebView：当多个元素在同一文档中使用该大小时，文本在某些大小范围内以错误的大小呈现

WKWebView: Text rendered at wrong size for certain size ranges when multiple elements use that size in the same document

css

viewport

ios

wkwebview