hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

安卓端没问题，ios还是有留白

hxl
hongxilin 3 months ago
parent
1968df8221
commit
5fc06756de
1 changed files with 94 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      src/views/homePage.vue

174
src/views/homePage.vue
View File

@ -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();
})
</script>

Write Preview
Loading…
Cancel
Save