Skip to content

移动端 Web Terminal 未按屏幕全屏展示 #418

Description

@luw2007

问题

在移动端或触摸设备打开 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 父容器。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions