键盘弹起致H5页面变形本质是视口高度突变与CSS单位不响应，应使用100dvh替代100vh，并配合visualViewport监听、禁用自动滚动及修复HTML结构和viewport meta。
键盘弹起导致 H5 页面变形，本质是视口高度突变（window.innerHeight 缩小）与 CSS 布局单位不响应造成的。iOS 和安卓行为不同：iOS 键盘常“覆盖”但会触发 visualViewport 变化；安卓则多为“挤压”，直接缩小 innerHeight。解决核心不是阻止键盘，而是让布局对高度变化不敏感。
用 100dvh 替代 100vh 做容器高度基准
100vh 在键盘弹出时仍按原始屏幕高度计算，导致内容溢出或压缩；100dvh（dynamic viewport height）是浏览器原生支持的动态单位，能真实反映键盘收/起后的可用视口高度。
- iOS 16+、Android Chrome 100+ 已全面支持，可放心用于现代项目
- 降级方案：用
@supports (height: 100dvh)包裹新写法，旧环境回退到 JS 动态设高 - 避免混用：不要在同一个容器同时设
height: 100vh和height: 100dvh，CSS 会以最后声明为准，但逻辑易混乱
监听 visualViewport 实现精准响应
相比老旧的 resize 事件，visualViewport API 能准确捕获键盘弹出/收起带来的视口尺寸变化，且 iOS Safari 支持良好。
- 监听方式：
window.visualViewport.addEventListener('resize', handler) - 获取真实高度：
const h = window.visualViewport?.height || window.innerHeight - 配合根元素锁定：
document.documentElement.style.height = h + 'px'，防止 body 高度塌陷
禁用默认滚动 + 锚定表单区域
键盘弹出时浏览器常自动滚动页面，把输入框“顶”进可视区，反而引发布局跳动。需主动干预。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 聚焦时临时禁用 body 滚动：
document.body.style.overflow = 'hidden' - 表单区域外层加
position: relative，内部输入框用position: absolute; bottom: 0锚定，脱离文档流依赖 - 失焦后恢复：
document.body.style.overflow = ''，并延时 20ms 再执行window.scrollTo(0, 0)避免回弹抖动
修复 HTML 结构与 viewport meta 基础项
很多“变形”问题其实和键盘无关，而是底层结构不健壮放大了视口变化的影响。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在于最前面，且只有一份 - 用 W3C Validator 检查标签闭合，尤其
<div><p>文字</p></div>这类嵌套错误，会导致渲染引擎补全逻辑错乱 - 移除
body { overflow-x: hidden }或未包裹的负 margin，它们会让键盘弹出时的宽度重算失效
