必须禁用双击缩放并适配安全区域:在HTML中添加viewport禁用缩放,Native端关闭scrollView回弹或侧滑返回;H5与Native通信需用WKScriptMessageHandler或JSBridge加密传输密码;触摸坐标须用getBoundingClientRect计算相对位置,并在capture阶段绑定touchmove事件。

UIWebView/WKWebView 加载 HTML5 手势密码页必须禁用双击缩放
iOS WebView 默认启用双击缩放,而手势密码依赖精确的 touchstart/touchmove 坐标判断,一旦触发缩放,e.touches[0].clientX 会因视口缩放失真,导致点选错位甚至无法识别路径。这不是 bug,是 Safari 渲染层行为。
- 必须在 HTML
中加入: - 在 Native 端加载时同步设置:
webView.scrollView.bounces = NO(UIWebView)或webView.allowsBackForwardNavigationGestures = false(WKWebView 防止侧滑返回干扰) - 若仍出现缩放,检查是否漏了
user-scalable=no—— iOS 10+ 对缺失此项非常敏感
Native 与 H5 之间传递手势结果要用 JSContext 或 WKScriptMessageHandler
HTML5 手势密码完成绘制后,需把密码数组(如 [2,5,8,6])安全传回 iOS,不能靠 window.location.hash 或轮询 localStorage,既不安全也不可靠。
- WKWebView 推荐用
WKScriptMessageHandler:H5 调用window.webkit.messageHandlers.gestureResult.postMessage(pwdArray),Native 在userContentController:didReceive:中接收 - UIWebView 只能注入 JSBridge:通过
stringByEvaluatingJavaScriptFromString:注册全局回调函数,H5 执行window.nativeCallback(pwdArray) - ⚠️ 注意:密码字符串必须在 H5 端加密后再传,不要裸传明文数组;Native 收到后也应立即清空 JS 内存引用,防止被调试器 dump
触摸坐标计算要适配状态栏 + 安全区域偏移
iOS 设备(尤其 iPhone X 及以后)存在刘海、Home Indicator 区域,document.documentElement.clientHeight 不等于可视区域真实高度,直接用 clientX/clientY 计算九宫格坐标会导致点位整体下移或错位。
- 绘制九宫格前,先获取安全区域:
const safeArea = window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')(需 CSS 注入支持),或用window.innerHeight替代screen.height - 推荐方案:用
getBoundingClientRect()获取 canvas 实际渲染位置,再结合e.touches[0].clientX - rect.left算相对坐标,彻底避开 viewport 缩放和安全区干扰 - 测试时务必在真机上验证 iPhone 15 Pro(灵动岛)、iPhone SE(无刘海)两种极端机型
WKWebView 下 touchmove 阻止默认行为必须在 capture 阶段
为防止手势过程中页面意外滚动,H5 必须调用 e.preventDefault(),但在 WKWebView 中,如果绑定在 bubbling 阶段(默认),部分 touchmove 事件仍会透出并触发滚动。
立即学习“前端免费学习笔记(深入)”;
- 正确写法:
canvas.addEventListener('touchmove', handler, { passive: false, capture: true }) -
passive: false是关键——iOS Safari 默认给 touch 事件加了 passive=true,此时再调preventDefault()会被忽略且抛 warning - 若使用 Hammer.js 等库,确保初始化时传
inputClass: Hammer.SafariMobileInput,否则多点触控识别率骤降
原生调用 HTML5 手势密码最易被忽略的不是加密逻辑,而是坐标系对齐和事件拦截时机——这两个点一旦出问题,用户“明明画对了却提示错误”,排查起来极难定位到 WebView 层。










