HTML在移动端键盘避让交互下的视口高度结构调整-html教程-PHP中文网

focus事件中调用scrollintoview最有效，因ios safari在键盘弹出前触发focus，android需用{block:'nearest',inline:'nearest'}；viewport必须含height=device-height且禁用user-scalable=no；键盘收起靠resize事件恢复位置，并需防抖；fixed底部元素应改用absolute定位。

html在移动端键盘避让交互下的视口高度结构调整

focus 事件里调 `scrollIntoView` 才真正有效

很多代码写在 click 或 resize 里，但时机全错了。iOS Safari 在键盘弹出前就触发 focus，此时调 scrollIntoView 反而是最准的；Android 部分机型则在焦点获得后极短时间内完成滚动，{ block: 'nearest', inline: 'nearest' } 能保证只做最小必要位移。

必须监听 input 或 textarea 元素自身的 focus 事件，不是 window 的 focusin；别加 behavior: 'smooth'——老版微信 X5 内核不支持，会静默失败；默认 block: 'start' 会把输入框顶到顶部，反而遮住光标。

input.addEventListener('focus', () => { input.scrollIntoView({ block: 'nearest', inline: 'nearest' }); });
若输入框在 overflow-y: auto 的容器内，需确保该容器是滚动上下文，否则 scrollIntoView 无效
不要在 touchstart 或 click 中提前调用——某些安卓 WebView 会在焦点真正获得前执行，滚动目标未激活就失效

`viewport` 标签漏写 `height=device-height` 就白忙

不加 height=device-height，iOS Safari 的 window.innerHeight 在键盘弹出时纹丝不动，JS 根本收不到“视口被压缩”的信号。你写的 scrollIntoView 逻辑可能根本没触发，不是代码错，是浏览器压根没告诉你键盘来了。

这个参数必须和 width=device-width、initial-scale=1.0 同时存在，缺一不可；不能写成 height=812 这类固定值；老版本 WebView（如微信 X5）可能忽略它，但不写就彻底失去机会。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">
user-scalable=no 是静默杀手：它会让 iOS 直接禁用键盘弹出时的 viewport 重绘机制，visualViewport.height 永远等于屏幕物理高度
检查 CMS 或 SSR 框架是否自动生成了重复的 viewport 标签——后写的会覆盖前写的，容易悄悄带上 user-scalable=no

键盘收起后靠 `resize` 事件恢复位置最可靠

iOS 和 Android 都会在软键盘完全收起后触发一次 resize，这是唯一稳定可依赖的信号。别监听 blur——它在键盘开始收起时就触发，此时视口还没恢复；也别靠定时器硬等，不同机型收起延迟差异大（从 100ms 到 400ms 不等）。

关键是要记录收起前的滚动位置，并在 resize 中恢复：

在 focus 前存 savedScrollTop = window.pageYOffset
在 resize 回调中判断 window.innerHeight > lastKnownHeight（高度增大即收起），再 window.scrollTo(0, savedScrollTop)
必须加防抖，避免连续 resize 触发多次 scrollTo（尤其横竖屏切换时）

`position: fixed` 底部元素在键盘弹出时必然漂移

position: fixed 锚定的是视觉视口（visual viewport），而软键盘弹出时，iOS 和多数安卓 WebView 并不真正重绘视口，只是压缩可用高度——fixed 元素仍按旧尺寸定位，结果就是按钮“浮”在键盘上方。

改用 position: absolute 才可控：

父容器设 position: relative 且 min-height: 100vh（只写 height: 100% 在键盘弹出时会塌陷）
底部元素加 width: 100%，否则横屏或缩放后错位
focus 后用 setTimeout(() => { }, 0) 确保 DOM 重排完成，再读 input.getBoundingClientRect().bottom 计算动态 bottom 值
blur 后立刻恢复初始 bottom: 0，否则滚动时元素消失

实际中最容易被忽略的点是：**resize 事件在 iOS 上并非每次键盘变化都触发，只有收起时才稳定；而 visualViewport?.height 在老版 Android WebView 中根本不可用——这意味着你不能只靠一个 API 或一个事件兜底，必须组合 focus/blur 状态 + resize 信号 + 动态坐标采样，三者缺一不可。**