如何禁用WKWebView中输入框输入时触发的自动缩放？

这个自动缩放是iOS端WebKit内核的默认交互逻辑，核心触发条件是聚焦的输入类控件（input/textarea/select）的计算后字体大小小于16px。很多人误以为配置user-scalable=no就能解决，实际上iOS 10之后WKWebView默认会忽略这个viewport属性来保障无障碍访问，单独配置不会生效。
以下方案按推荐优先级排序，如果你能同时控制自有网站前端代码和App原生代码，组合使用兼容性最好。

方案1：前端侧适配（无原生侵入，适配所有iOS版本） #

• 全局给所有输入类控件设置最小16px字体，从根源规避触发条件：

input, textarea, select {
  font-size: 16px !important;
}

如果16px和现有设计稿尺寸不符，可以配合CSS transform: scale() 做等比缩放，不会影响视觉呈现，也不会触发自动缩放逻辑。

• 正确配置viewport标签，必须声明width=device-width：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">

方案2：原生端配置（适合不方便修改前端代码的场景） #

• iOS 14及以上版本，WKWebView提供了原生配置项直接锁定页面缩放，初始化时加入如下代码即可同时阻止用户主动缩放和输入触发的自动缩放：

// Swift 实现
let config = WKWebViewConfiguration()
if #available(iOS 14.0, *) {
    config.defaultWebpagePreferences.isLockingZoom = true
}
let webView = WKWebView(frame: .zero, configuration: config)

// Objective-C 实现
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
if (@available(iOS 14.0, *)) {
    config.defaultWebpagePreferences.isLockingZoom = YES;
}
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];

• 兼容iOS 14以下版本时，可以通过注入JS脚本动态修正输入框字体、强制锁定viewport：

let disableInputZoomScript = WKUserScript(
    source: """
    // 初始化/修正viewport配置
    let viewportMeta = document.querySelector('meta[name="viewport"]') || document.createElement('meta')
    viewportMeta.name = 'viewport'
    viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
    if (!viewportMeta.parentNode) document.head.appendChild(viewportMeta)
    // 输入框聚焦时强制设置16px字体，失焦后还原原有样式
    let originFontSize = ''
    document.addEventListener('focusin', e => {
        const target = e.target
        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
            originFontSize = target.style.fontSize
            target.style.fontSize = '16px'
        }
    }, true)
    document.addEventListener('focusout', e => {
        const target = e.target
        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
            target.style.fontSize = originFontSize
        }
    }, true)
    """,
    injectionTime: .atDocumentEnd,
    forMainFrameOnly: true
)
config.userContentController.addUserScript(disableInputZoomScript)

避坑提示 #

• 不要通过禁用UIScrollView的缩放代理、修改scrollView的minimumZoomScale/maximumZoomScale属性实现，会导致页面点击区域偏移、输入框焦点错位等问题。
• 如果项目使用第三方前端UI组件库，注意检查组件库默认输入框字体大小，不少移动端组件库默认给输入框设置12px/14px字体，刚好触发WebKit的缩放阈值。

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