问题
在移动端或触摸设备打开 Web Terminal 链接(例如 /s/{sessionId})时,OpenCode 终端页面看起来没有按当前屏幕全屏铺满。
现象
- 终端页面在移动端视觉上像按桌面宽度缩放。
- xterm 容器没有贴合当前设备 viewport。
- OpenCode TUI 展示区域不符合用户对全屏 Web Terminal 的预期。
根因
Web Terminal HTML 在触摸设备上会把 viewport 强制改成固定宽度:
if(isTouch){document.getElementById("vp").content="width=1100,viewport-fit=cover";document.body.classList.add("touch");}
这会让移动浏览器按 1100px 逻辑宽度缩放页面,而不是使用当前设备宽度。同时页面高度只依赖 height:100%,移动浏览器地址栏/工具栏变化时,xterm FitAddon 容易按非动态视口高度计算。
期望
- Web Terminal 在移动端按真实 viewport 宽高铺满。
- 保留触摸端滚动、禁止文本选择、快捷工具栏等已有行为。
- 不影响 WebSocket resize、PTY、CLI adapter 或后端会话逻辑。
修复方向
- 移除触摸设备的
width=1100 viewport 覆盖。
- 使用
height:100vh; height:100dvh 让 body 按动态视口高度铺满。
- 明确设置
#terminal 的宽高,保证 xterm 容器填满 flex 父容器。
问题
在移动端或触摸设备打开 Web Terminal 链接(例如
/s/{sessionId})时,OpenCode 终端页面看起来没有按当前屏幕全屏铺满。现象
根因
Web Terminal HTML 在触摸设备上会把 viewport 强制改成固定宽度:
这会让移动浏览器按 1100px 逻辑宽度缩放页面,而不是使用当前设备宽度。同时页面高度只依赖
height:100%,移动浏览器地址栏/工具栏变化时,xterm FitAddon 容易按非动态视口高度计算。期望
修复方向
width=1100viewport 覆盖。height:100vh; height:100dvh让 body 按动态视口高度铺满。#terminal的宽高,保证 xterm 容器填满 flex 父容器。