H5 远程控制页面在手机端需手动缩放 — 固定宽度布局问题
Open
Nobody has claimed this yet.
priority: P2
- Dominant language
- No language data
- Stars
- 22
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
问题描述
H5 远程控制页面（https://zcode.z.ai/remote/v3）在手机端浏览器打开时，页面被渲染为固定宽度（1216px），导致用户需要手动缩放才能正常浏览。
环境信息
- 手机浏览器（iOS Safari / Android Chrome）
- 页面 URL：https://zcode.z.ai/remote/v3
问题根因
经检测，页面的 CSS 存在固定宽度布局问题：
| 元素 | width | max-width |
|---|---|---|
| `body` | `1216px` | `none` |
| `#root` | `1216px` | `none` |
虽然 HTML 中设置了 ``，但 CSS 的固定像素宽度覆盖了 viewport 的自适应行为。
复现步骤
- 用手机浏览器打开 H5 远程控制页面
- 观察页面整体被缩小，需要双指缩放才能看清内容
- 刷新页面后问题依旧
期望行为
页面应自适应手机屏幕宽度，无需用户手动缩放。
标签
status: 待评估
type: Bug
severity: 影响体验
priority: P2
cat: UI
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open https://zcode.z.ai/remote/v3 in iOS Safari or Android Chrome and inspect the computed styles for body and #root. Confirm how the 1216px widths affect the viewport, then verify that the page fits the phone width without manual zooming after the responsive layout is adjusted.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100