移动端input聚焦时被虚拟键盘遮挡的解决方案是调用scrollIntoView({ block: 'nearest', inline: 'nearest' })，需在focus事件中执行；viewport须设height=device-height且禁用user-scalable=no；键盘收起后通过resize事件+防抖scrollTo恢复位置。

input聚焦时底部被虚拟键盘盖住

这是移动端最常遇到的布局错位问题：用户点击<input>，键盘弹出，但输入框位置没变，直接被盖在键盘下面。根本原因不是CSS没写好，而是浏览器对viewport高度的处理逻辑变了——键盘弹起时，部分Android和iOS会缩放或重算可视区域，而position: fixed或bottom: 0元素不会自动上移。

• 别依赖window.innerHeight做滚动定位，它在键盘弹出后可能还没更新（尤其iOS Safari）
• 监听focus事件后立刻scrollIntoView({ behavior: 'smooth' })比手动计算更可靠
• 对type="text"、type="tel"等软键盘触发型输入框才需处理；type="hidden"或disabled状态不用管
• iOS 16.4+ 对visualViewport支持变好，可用visualViewport.addEventListener('resize', ...)捕获键盘高度变化，但Android WebView大多不支持

使用scrollIntoView强制滚动到输入框顶部

比起自己算top、offset、scrollTop，scrollIntoView是目前兼容性最好、代码最轻量的解法。它不依赖页面是否启用overflow: hidden或是否嵌套在position: relative容器里。

• 必须在input的focus事件回调里调用，不能放在click或touchstart里（时机太早，DOM还没获得焦点）
• 加{ block: 'nearest', inline: 'nearest' }参数避免过度滚动；默认block: 'start'会把输入框顶到视口最上方，反而遮住光标
• 某些老版微信内置浏览器（X5内核）不支持behavior: 'smooth'，直接去掉该参数更稳妥
• 示例：

  input.addEventListener('focus', () => {
    input.scrollIntoView({ block: 'nearest', inline: 'nearest' });
  });

viewport meta标签写法影响键盘行为

<meta name="viewport">不是摆设。写错一个参数，iOS会禁用缩放但同时锁死visualViewport高度，导致所有滚动逻辑失效。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 必须包含height=device-height，否则iOS Safari在键盘弹出后window.innerHeight不变，无法判断遮挡
• 禁止写user-scalable=no——它会让iOS忽略键盘弹出时的viewport重绘，visualViewport.height永远等于屏幕高度
• 推荐写法：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">

• Android Chrome对height=device-height支持较弱，但至少不会让情况更糟；真正要命的是user-scalable=no在iOS上的静默破坏

键盘收起后页面卡在错误位置

键盘收起时，浏览器未必自动恢复滚动位置。尤其当用户快速点完输入框又点其他按钮，页面可能停留在中间某处，下拉刷新都触发不了。

立即学习“前端免费学习笔记（深入）”；

• 监听blur事件不靠谱——用户切到其他App再切回来，blur根本不会触发
• 更稳的办法是监听resize事件，配合setTimeout防抖：当window.innerHeight明显变大（比如+200px），就window.scrollTo(0, 0)或还原之前存的scrollY
• 别用document.body.scrollTop = 0，Safari可能无视；统一用window.scrollTo(0, 0)
• 如果页面本身有锚点跳转或路由滚动行为，记得在scrollTo前加history.scrollRestoration = 'manual'，防止浏览器覆盖你的修复

事情说清了就结束。真正难的不是写几行JS，而是得记住：iOS和Android对同一个viewport参数反应不同，同一个focus事件在不同WebView里触发时机差200ms，而用户不会等你debug。