3.4 KiB
屏幕比例、触摸与 PWA 验证
日期：2026-09-09。保持原生 TypeScript / Three.js / DOM 实现；原片对照继续使用 1920×1080 舞台。
实现边界
- 交互舞台按视口延展；桌面以 1080 高度计算坐标，小屏使用 CSS 像素。宽高比小于 1.05 时采用竖屏布局。
- 竖屏详情使用上方模型和下方独立滚动正文；镜头构图只改变投影与相机位置，不移动模型来适配。固定预览参照保留波浪、抬起和循环轨道的运动。
- 使用安全区域和动态视口；软键盘通过 Visual Viewport 缩短弹窗，不反复重建三维缓冲。横竖屏切换保留选择、视角和拆解状态。
- 指针捕获、取消和多指隔离避免误切档；单次滑动至少 36 px，主轴至少为次轴的 1.3 倍，最长 1.4 秒。查看器双指缩放与平移，正文保持原生滚动。
- 延用用户画质。渲染分辨率按实际画布尺寸计算；后台标签页暂停更新，开场纯二维阶段不渲染三维阵列。没有按手机型号降低材质或阴影。
- Safari 点击按钮不一定转移焦点，因此显式记录弹窗与查看器的打开按钮。缺少全屏 API 时不显示全屏按钮。
自动检查
npm run build、npm run check:viewport、既有档案内容、循环阵列、解密与画质检查均通过。
scripts/check-responsive.mjs 在真实 WebGL 页面验证以下视口：
| 类型 | CSS 视口 |
|---|---|
| 桌面基准 | 1920×1080 |
| 笔记本 | 1440×900 |
| 宽屏 / 超宽屏 | 2560×1080 / 3840×1080 |
| 较方桌面 | 1280×1024 |
| 手机横屏 / 竖屏 | 844×390 / 390×844 |
| 小屏竖屏 / 横屏 | 320×568 / 568×320 |
检查主要按钮不越界、两个方向的滑动、八次切档跨循环接缝、解密完成及抽取高度 4.05、正文滚动和收藏、查看器拆解、双指缩放和平移、旋转屏幕后的状态保留，以及检索、收藏与设置弹窗。Windows Playwright WebKit 另检查 390×844、844×390；其指针检查使用合成 PointerEvent，不能代表 iPhone 真实多指输入。
1920×1080 原片 39 秒定格与改动前截图对照：相机、投影与模型坐标一致；RGB 平均绝对差 0.013852 / 255，单通道最大差 4 / 255。截图为真实渲染差异，不能解释为所有设备逐像素一致。测试报告和截图输出在本地 .tools/responsive。
iPhone 实机
用户已在 iPhone / Safari 试用并反馈没有明显问题。提供 npm run review:mobile 与 reference/mobile-review.html，可在同一局域网测试阵列、切档、解密和查看器并保存帧间隔报告；尚未收到真机报告，因此不声称已取得 iPhone 帧率或 GPU 耗时数据。Windows WebKit 不支持本次音频环境，声音听感与 iPhone 音频需以真机为准。
PWA
scripts/check-pwa.mjs 使用生产构建验证：
- manifest 与图标；62 个资源、约 28 MiB 的完整版本安装。
- 断网重新加载、字体、TXT 导出、模型查看与拆解、音乐资源读取。
- 新版本等待、用户明确更新后重启、清理本应用旧版本、保留其他缓存及收藏偏好。
- 模拟一个图标返回 503 导致更新失败：删除不完整新版本，旧版本继续离线打开。
这些是本地 Chromium 的 Service Worker 实测。iPhone 从主屏幕启动、系统安全区、缓存保留时长和音频自动播放限制，需要实际设备继续确认。使用步骤与 Vercel 配置见 PWA 说明。