diff --git a/src/views/homePage.vue b/src/views/homePage.vue index 74e327c..1785177 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -331,85 +331,85 @@ const heightListener = () => { const throttledHeightListener = _.throttle(heightListener, 500, { trailing: false }); // 优化后的输入框焦点处理方法 -const handleInputFocus = () => { - console.log('设置输入框焦点监听'); - const inputElement = document.querySelector('#input'); - if (!inputElement) return; - - // 判断是否为移动设备 - const isMobileDevice = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( - navigator.userAgent - ); - console.log('是否为移动设备:', isMobileDevice, navigator.userAgent); - - if (isMobileDevice) { - console.log('检测到移动设备,应用键盘适配'); - - // 设置页面视窗 - const meta = document.querySelector('meta[name="viewport"]'); - if (!meta) { - const newMeta = document.createElement('meta'); - newMeta.name = 'viewport'; - newMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; - document.getElementsByTagName('head')[0].appendChild(newMeta); - } else { - meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; - } - - // 初始化页面高度 - updateAppHeight(); - - // 检测是否为iOS设备 - const isIOS = /iPhone|iPad|iPod|ios/i.test(navigator.userAgent); - console.log('是否为iOS设备:', isIOS); - - if (isIOS) { - console.log('iOS设备特殊处理开始'); - // 使用 visualViewport API 监测视口变化 - if (window.visualViewport) { - window.visualViewport.addEventListener('resize', () => { - const headerHeight = document.querySelector('.el-header').offsetHeight; - const footerHeight = document.querySelector('.el-footer').offsetHeight; - const keyboardHeight = window.visualViewport.height; // 获取虚拟键盘高度 - const totalHeight = headerHeight + footerHeight; // 头部和底部的总高度 - - // 计算 el-main 的新高度 - const newMainHeight = window.innerHeight - totalHeight - keyboardHeight; - - // 设置 el-main 的高度 - document.querySelector('.el-main').style.height = `${newMainHeight}px`; - }); - } - - } else { - // Android设备处理 - console.log('Android设备处理'); - window.addEventListener('resize', _.debounce(() => { - console.log('窗口大小改变:', window.innerHeight); - updateAppHeight(); - - // 尝试在键盘弹出后滚动到输入框位置 - const msgInput = document.querySelector('.msg-input'); - if (document.activeElement === msgInput) { - setTimeout(() => { - console.log('滚动到输入框位置'); - inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); - - const tabContentElement = document.querySelector('.tab-content'); - if (tabContentElement) { - tabContentElement.scrollTop = tabContentElement.scrollHeight; - } - }, 200); - } - }, 100)); - } - } -}; +// const handleInputFocus = () => { +// console.log('设置输入框焦点监听'); +// const inputElement = document.querySelector('#input'); +// if (!inputElement) return; + +// // 判断是否为移动设备 +// const isMobileDevice = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( +// navigator.userAgent +// ); +// console.log('是否为移动设备:', isMobileDevice, navigator.userAgent); + +// if (isMobileDevice) { +// console.log('检测到移动设备,应用键盘适配'); + +// // 设置页面视窗 +// const meta = document.querySelector('meta[name="viewport"]'); +// if (!meta) { +// const newMeta = document.createElement('meta'); +// newMeta.name = 'viewport'; +// newMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; +// document.getElementsByTagName('head')[0].appendChild(newMeta); +// } else { +// meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; +// } + +// // 初始化页面高度 +// updateAppHeight(); + +// // 检测是否为iOS设备 +// const isIOS = /iPhone|iPad|iPod|ios/i.test(navigator.userAgent); +// console.log('是否为iOS设备:', isIOS); + +// if (isIOS) { +// console.log('iOS设备特殊处理开始'); +// // 使用 visualViewport API 监测视口变化 +// if (window.visualViewport) { +// window.visualViewport.addEventListener('resize', () => { +// const headerHeight = document.querySelector('.el-header').offsetHeight; +// const footerHeight = document.querySelector('.el-footer').offsetHeight; +// const keyboardHeight = window.visualViewport.height; // 获取虚拟键盘高度 +// const totalHeight = headerHeight + footerHeight; // 头部和底部的总高度 + +// // 计算 el-main 的新高度 +// const newMainHeight = window.innerHeight - totalHeight - keyboardHeight; + +// // 设置 el-main 的高度 +// document.querySelector('.el-main').style.height = `${newMainHeight}px`; +// }); +// } + +// } else { +// // Android设备处理 +// console.log('Android设备处理'); +// window.addEventListener('resize', _.debounce(() => { +// console.log('窗口大小改变:', window.innerHeight); +// updateAppHeight(); + +// // 尝试在键盘弹出后滚动到输入框位置 +// const msgInput = document.querySelector('.msg-input'); +// if (document.activeElement === msgInput) { +// setTimeout(() => { +// console.log('滚动到输入框位置'); +// inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); + +// const tabContentElement = document.querySelector('.tab-content'); +// if (tabContentElement) { +// tabContentElement.scrollTop = tabContentElement.scrollHeight; +// } +// }, 200); +// } +// }, 100)); +// } +// } +// }; -function updateAppHeight() { - const vh = window.innerHeight; - document.documentElement.style.setProperty('--app-height', `${vh}px`); -} +// function updateAppHeight() { +// const vh = window.innerHeight; +// document.documentElement.style.setProperty('--app-height', `${vh}px`); +// } const adjustFooterPosition = (height) => { console.log('调整底部位置', height) @@ -427,7 +427,9 @@ const adjustFooterPosition = (height) => { const html = document.querySelector('html'); const body = document.querySelector('body'); + html.style.height = `${height}px`; + console.log(html.offsetHeight, 'html') console.log(html.clientHeight, 'html') console.log(html.scrollHeight, 'htmlScrollHeight') @@ -436,6 +438,8 @@ const adjustFooterPosition = (height) => { console.log(homePage.offsetHeight, 'homePage') console.log(homePage.clientHeight, 'homePageClientHeight') console.log(homePage.scrollHeight, 'homePageScrollHeight') + console.log(window.innerHeight, 'window.innerHeight') + console.log(window.visualViewport.height, 'window.visualViewport.height') }; @@ -467,6 +471,16 @@ const onBlur = function () { }, 200) } +window.addEventListener('resize', () => { + // 检测是否为iOS设备 + const isIOS = /iPhone|iPad|iPod|ios/i.test(navigator.userAgent); + console.log('是否为iOS设备:', isIOS); + if (!isIOS) { + console.log('窗口大小变化') + const homePage = document.querySelector('.homepage'); + homePage.style.height = `${window.innerHeight}px`; + } +}); onMounted(async () => { const isPhone = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( @@ -483,10 +497,10 @@ onMounted(async () => { throttledHeightListener(); // 添加输入框焦点处理 - handleInputFocus(); + // handleInputFocus(); // 初始化视口高度变量 - updateAppHeight(); + // updateAppHeight(); })