HTML移动端全屏布局怎么防止虚拟键盘遮挡-html教程-PHP中文网

全屏布局下输入框被键盘盖住的根本原因是浏览器未自动滚动，而非height: 100vh错误；必须在input/textarea的focus事件中调用scrollintoview({ block: 'nearest', inline: 'nearest' })，并确保viewport包含height=device-height且禁用user-scalable=no，否则js无法感知键盘弹出。

html移动端全屏布局怎么防止虚拟键盘遮挡

focus事件里调scrollIntoView({ block: 'nearest', inline: 'nearest' })才有效

全屏布局下输入框被键盘盖住，不是因为height: 100vh写错了，而是浏览器根本没帮你滚动——iOS Safari在focus触发时就已准备好键盘，但页面还卡在原位置。必须在这个瞬间干预。

监听input或textarea自身的focus事件，不是click或touchstart（时机太早，DOM还没真正聚焦）
直接调element.scrollIntoView({ block: 'nearest', inline: 'nearest' })，不加behavior: 'smooth'（老版微信X5内核会静默失败）
别用scrollIntoViewIfNeeded()——Android WebView里基本不支持，容易白执行
如果输入框在position: fixed容器里，确保父容器overflow: visible，否则滚动会被截断

viewport meta标签写错，JS就完全失效

90%的“滚动没反应”问题，根源是<meta name="viewport">锁死了浏览器对键盘弹出的感知能力。iOS一旦被禁用viewport重绘，visualViewport.height永远等于屏幕高度，JS压根不知道键盘起来了。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须包含height=device-height：否则iOS Safari的window.innerHeight在键盘弹出后不变，无法判断遮挡
绝对禁用user-scalable=no：它会让iOS静默忽略键盘弹出时的viewport重绘，比不写还危险
推荐写法：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, height=device-height">
Android Chrome对height=device-height支持弱，但至少不会破坏逻辑；别用viewport-fit=cover单独撑开——它不解决滚动问题

安卓WebView里scrollIntoView常失效，得换resize+延迟

安卓Chrome和WebView在软键盘弹出前就发了focus，此时window.innerHeight还是原始值，scrollIntoView()滚的是“键盘还没出来”的位置，结果滚完键盘一弹，又盖住了。

改监听window的resize事件，更可靠（键盘弹出会触发）
必须加setTimeout，至少100ms，低端机可能要400–600ms
用document.activeElement.getBoundingClientRect()动态判断是否真被遮挡：rect.bottom > window.innerHeight才滚动
别依赖document.body.scrollTop——安卓下基本为0，统一用document.documentElement.scrollTop或直接操作元素

blur时不处理，页面就悬在半空

focus时滚上去了，blur时不恢复，用户再点别的输入框，光标可能直接消失——尤其iOS收起键盘后页面不自动回滚，留白+错位是常态。

监听blur事件，配合防抖（比如200ms），再调一次window.scrollTo(0, lastScrollTop)
lastScrollTop要在focus前一刻取：const lastScrollTop = window.visualViewport?.pageTop || window.pageYOffset
别用window.scroll(0, 0)硬滚回顶部，会打断用户浏览上下文
如果底部有position: fixed输入框+遮罩层，blur时得临时把遮罩层position切回fixed并重置bottom: 0