在 WKWebView 上禁用字体缩放

Question

我想在 iOS 上使用 WKWebView，它始终以我指定的确切字体大小显示文本，例如 12px。但是我找不到一种方法来阻止它根据许多不同的变量缩放字体，包括设备的方向和 HTML.

中的内容

我在"viewport" HTML 标签中尝试了很多不同的参数组合，比如设置恒定宽度，以及将初始、最小和最大比例设置为不同的值。 None 这会阻止 Web 视图以特定于上下文的方式更改字体。

下面是一些示例 Swift 代码，说明了我所看到的内容：

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet var webView: WKWebView!
    @IBOutlet var webView2: WKWebView!

    override func viewDidLoad()
    {
        super.viewDidLoad()

        let htmlFormatString = "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"/><style type=\"text/css\">p {font-size: 12px;}</style></head><body>%(body)</body></html>"

        let htmlTest1 = htmlFormatString.replacingOccurrences(of: "%(body)", with: "<p>Test paragraph 1.")

        webView.loadHTMLString(htmlTest1, baseURL: URL(string: "http:"))

        let htmlTest2 = htmlFormatString.replacingOccurrences(of: "%(body)", with: "<p>Test paragraph 1.<p>Test paragraph 2.")

        webView2.loadHTMLString(htmlTest2, baseURL: URL(string: "http:"))
    }
}

我刚刚设置了一个包含两个 Web 视图的故事板，一个绑定到视图的上半部分，另一个绑定到视图的下半部分。

如果您运行在纵向模式下的模拟器上，两者的内容将以相同的比例显示。但是如果你旋转到横向，底部 web 视图的字体明显大于顶部的。通过实验，我确定当 HTML 中有两个 "p" 标签时，字体会变大。当只有一个"p"时，字体较小。我不明白这是要达到什么目的，因为如果有的话，因为底部网络视图中有更多文本，我希望它能按比例缩小。无论哪种方式，我根本不希望它扩展。我的设计师要求它无论如何总是以 12px 绘制。

即使从 HTML 中完全删除 "head" 也可以看到这一点，因此没有视口或样式。

Answer 1

尝试在你的 css 中添加：

body {
  -webkit-text-size-adjust: none;
}

在 WKWebView 上禁用字体缩放

Disable Font Scaling on WKWebView

html

css

ios

wkwebview