在 WKWebView 上禁用字体缩放
Posted
技术标签:
【中文标题】在 WKWebView 上禁用字体缩放【英文标题】:Disable Font Scaling on WKWebView 【发布时间】:2019-04-18 15:04:52 【问题描述】:我想在 ios 上使用 WKWebView,它始终以我指定的确切字体大小显示文本,例如 12px。但是我无法找到一种方法来阻止它根据许多不同的变量来缩放字体,包括设备的方向和 html 中的内容。
我在“viewport”HTML 标记中尝试了许多不同的参数组合,例如设置恒定宽度,以及将初始、最小和最大比例设置为不同的值。这些都不会阻止 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”时,字体更小。我不明白这是要达到什么目的,因为如果有的话,因为底部 Web 视图中有更多文本,我希望它会按比例缩小。无论哪种方式,我都不希望它扩展。我的设计师要求它无论如何都要以 12 像素绘制。
即使从 HTML 中完全删除“头部”也可以看到这一点,因此没有视口或样式。
【问题讨论】:
这能回答你的问题吗? fontsize in wkwebview after rotation/orientation change 【参考方案1】:尝试添加你的css:
body
-webkit-text-size-adjust: none;
【讨论】:
以上是关于在 WKWebView 上禁用字体缩放的主要内容,如果未能解决你的问题,请参考以下文章
以编程方式启用/禁用捏合以放大 WKWebView 和 viewForZoomingInScrollView
如何在本机反应中禁用文本输入的字体缩放(可访问性的动态类型)?
在 iOS WKWebView 中保留“Referer”标头?