update at 2026-03-03 17:05:40
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
#terminal {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
@@ -11,45 +11,33 @@ export function mobileKeyboard(): void {
|
||||
}
|
||||
|
||||
export function initMobileViewport(term: any): void {
|
||||
// Safari/iOS 上阻止页面随着键盘弹出连带回弹上卷
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.width = '100%';
|
||||
document.body.style.height = '100%';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// 劫持容器,阻止橡皮筋翻页穿透
|
||||
document.addEventListener('touchmove', (e) => {
|
||||
if (!(e.target as Element).closest('.xterm-viewport')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
if (window.visualViewport) {
|
||||
const handleResize = () => {
|
||||
// 计算键盘弹起遮挡区域(针对不同平台浏览器处理)
|
||||
let bottomInset = 0;
|
||||
if (window.visualViewport) {
|
||||
bottomInset = Math.max(
|
||||
0,
|
||||
window.innerHeight - (window.visualViewport.height + window.visualViewport.offsetTop)
|
||||
);
|
||||
}
|
||||
|
||||
const termWrapper = document.getElementById('terminal'); // 或获取最近的包装器
|
||||
if (termWrapper) {
|
||||
if (bottomInset > 0) {
|
||||
termWrapper.style.paddingBottom = `${bottomInset}px`;
|
||||
} else {
|
||||
termWrapper.style.paddingBottom = '0px';
|
||||
}
|
||||
}
|
||||
|
||||
// 调整完包裹层高度后,通知 xterm 重新按新的可用高度进行行列计算
|
||||
// 类似 xterminal,给软键盘和页面重排一点时间
|
||||
setTimeout(() => {
|
||||
let bottomInset = 0;
|
||||
if (window.visualViewport) {
|
||||
bottomInset = Math.max(
|
||||
0,
|
||||
window.innerHeight - (window.visualViewport.height + window.visualViewport.offsetTop)
|
||||
);
|
||||
}
|
||||
|
||||
const termWrapper = document.getElementById('terminal'); // 外层容器
|
||||
if (termWrapper) {
|
||||
if (bottomInset > 0) {
|
||||
termWrapper.style.paddingBottom = `${bottomInset}px`;
|
||||
} else {
|
||||
termWrapper.style.paddingBottom = '0px';
|
||||
}
|
||||
}
|
||||
|
||||
// 通知 xterm 重新按新的可用高度进行行列计算,类似于 xterminal 重新适配行
|
||||
if (term && term.fitAddon) {
|
||||
term.fitAddon.fit();
|
||||
term.scrollToBottom();
|
||||
}
|
||||
}, 50);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
window.visualViewport.addEventListener('resize', handleResize);
|
||||
|
||||
Reference in New Issue
Block a user