iOS Safari input聚焦不弹键盘主因是焦点需用户真实触摸触发且元素须在可视区、未被transform/opacity隐藏；应直接绑定事件、禁用合成层、立即focus、监听visualViewport而非window.innerHeight，并手动处理滚动与布局错乱。
input聚焦时iOS Safari不弹出虚拟键盘
常见于WebView嵌套H5页面、或使用position: fixed遮罩层后点击input无响应。根本原因是iOS Safari对焦点事件的拦截策略更严格：必须由用户真实触摸触发，且元素需在可视区域内、未被transform或opacity: 0等隐藏手段影响。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
input或textarea绑定的click/touchstart事件是直接绑定在该元素上（不能靠父元素冒泡触发） - 移除父容器的
transform: translateZ(0)或will-change: transform——这些会触发iOS的合成层隔离，导致焦点丢失 - 在
touchstart回调中立即调用el.focus()，不要加setTimeout或Promise延迟 - 若用Vue/React，避免在
v-if或useState更新后立刻focus()，需用nextTick或useEffect配合ref确保DOM已挂载
键盘弹出后页面内容被顶起或截断
iOS Safari在键盘弹出时不会自动触发resize事件，但会改变visualViewport.height，同时window.innerHeight保持不变——这是所有错位问题的根源。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
visualviewport事件：visualViewport.addEventListener('resize', () => { ... })，用visualViewport.height计算当前可用视口高度 - 避免依赖
window.innerHeight做滚动定位；改用document.documentElement.scrollHeight+window.scrollY判断是否到底部 - 键盘收起时，
visualViewport.height恢复，但页面可能残留滚动偏移，需手动window.scrollTo(0, savedScrollTop)还原 - 慎用
scrollIntoView({ behavior: 'smooth' })——iOS下易触发多次滚动或卡顿，改用scrollTop硬跳转更可靠
输入框被键盘遮挡，无法滚动到可视区域
iOS Safari默认不会自动滚动聚焦元素到键盘上方，尤其当input在底部、且父容器有overflow: hidden时，几乎必然被盖住。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 聚焦后手动滚动：获取
input.getBoundingClientRect().bottom，对比visualViewport.height，若超出则执行el.scrollIntoView({ block: 'nearest' }) - 禁止页面整体滚动干扰：给
body加position: fixed; top: -${window.scrollY}px临时锁定，键盘收起后再还原 - 若用
fixed定位的输入框（如聊天输入栏），确保其父容器没有transform，否则scrollIntoView失效 - 测试时务必在真机开启「缩放字体」设置——字体放大后键盘高度变化，容易暴露滚动计算偏差
软键盘收起后页面留白或布局错乱
典型现象是键盘收起后，页面底部多出一片空白，或height: 100vh的容器突然变矮。这是因为iOS在键盘收起瞬间仍维持较小的visualViewport.height，而CSS的vh单位尚未同步刷新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免直接用
100vh做全屏容器高度；改用min-height: 100vh或height: 100dvh（iOS 16.4+支持，但旧版本需降级） - 监听
keyboardWillHide（仅WKWebView可用）或用visualviewport.resize+ 延迟检测：键盘收起后等待requestAnimationFrame再校验visualViewport.height是否恢复 - 如果用了
body { height: 100% }+html { height: 100% }，需在键盘收起后手动document.body.style.height = 'auto'重置，否则影响后续滚动
最易被忽略的是visualViewport在iOS 15以下版本不可用，且WKWebView和UIWebView行为差异极大——真机调试别只信模拟器，每次键盘交互都得在iOS 14–17各版本跑一遍。
