如何在WKWebView中实现类似Safari的aA页面内容缩放功能？

Safari 实现原理 #

• Safari 的aA菜单页面缩放是WebKit内核原生提供的整页缩放能力，区别于普通的CSS缩放、View transform缩放：它会同步等比缩放页面内所有文字、图片、固定/绝对定位元素、交互热区，自动适配滚动视图内容尺寸，不会出现元素错位、点击区域偏移问题，默认缩放范围为50%~300%，支持按站点独立存储缩放偏好。

公开API复刻可行性 #

• iOS 15 及以上版本：苹果已经将该能力开放为WKWebView公开属性，可以100%复刻Safari的效果，不需要调用私有接口。
• iOS 14 及更低版本：该能力仅作为WebKit私有接口存在，直接调用存在App Store审核风险，公开API没有完美替代方案，只能实现近似效果。

具体实现代码 #

iOS15+ 完美实现 #

直接调用WKWebView的pageZoom属性即可，该属性的行为和Safari缩放完全一致，修改时不会触发页面重载：

// 缩放值范围为0.5~3.0，默认值1.0代表100%缩放
webView.pageZoom = 1.15 // 对应115%缩放

如果需要和Safari一样实现站点缩放记忆，只需要在WKNavigationDelegate的webView(_:didCommit:)回调中，根据当前页面URL的host读取本地存储的对应缩放值，赋值给pageZoom即可。

iOS14及更早版本近似方案 #

没有办法实现完全一致的效果，可选的替代方案都存在体验缺陷：

• 注入JS修改meta viewport的initial-scale值：部分严格适配viewport的站点会失效，固定定位元素容易出现错位
• 对webView.scrollView应用CGAffineTransform缩放：需要手动修正contentSize偏移，交互点击区域容易错位，体验较差

功能示例 #

内容的提问来源于stack exchange，提问作者Vitalik