修复 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
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:
@@ -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()
|
||||||
|
|||||||
Reference in New Issue
Block a user