修复 PWA 模式下键盘收起页面不回弹的问题
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 15s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s

This commit is contained in:
孙诚
2026-01-08 15:23:31 +08:00
parent ab1d216664
commit fcd3a6eb07

View File

@@ -46,19 +46,31 @@ import '@/styles/common.css'
const messageStore = useMessageStore() const messageStore = useMessageStore()
const updateVh = () => { const updateVh = () => {
// 获取真实的视口高度PWA 模式下准确)
const vh = window.innerHeight const vh = window.innerHeight
// 设置 CSS 变量,让所有组件使用准确的视口高度
document.documentElement.style.setProperty('--vh', `${vh}px`) document.documentElement.style.setProperty('--vh', `${vh}px`)
} }
// 修复 PWA 模式下键盘收起页面不回弹的问题
const handleFocusOut = () => {
if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
// 延迟一小段时间执行,确保键盘收起动作已开始
setTimeout(() => {
// 强制回到顶部
window.scrollTo(0, 0)
// 同时也触发一次高度更新
updateVh()
}, 100)
}
}
onMounted(() => { onMounted(() => {
updateVh() updateVh()
window.addEventListener('resize', updateVh) window.addEventListener('resize', updateVh)
// 监听 iOS Safari 视口变化
if (window.visualViewport) { if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateVh) window.visualViewport.addEventListener('resize', updateVh)
} }
// 注册全局失去焦点监听
document.addEventListener('focusout', handleFocusOut)
}) })
onUnmounted(() => { onUnmounted(() => {
@@ -66,6 +78,8 @@ onUnmounted(() => {
if (window.visualViewport) { if (window.visualViewport) {
window.visualViewport.removeEventListener('resize', updateVh) window.visualViewport.removeEventListener('resize', updateVh)
} }
// 销毁监听
document.removeEventListener('focusout', handleFocusOut)
}) })
const route = useRoute() const route = useRoute()