Initial commit: RHINE LAB · ANALYSIS OS:三维界面与动效实验(本仓库不含个人归档索引数据)
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# 屏幕比例、触摸与 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 说明](../docs/PWA.md)。
|
||||
Reference in New Issue
Block a user