fix(mobile): 修移动端顶栏塌陷,窄屏默认卡片视图
问题(用户报告移动端异常):窄屏下顶栏统计挤成竖排并与标题重叠, 表格在手机上必须横向拖动,固定装饰在小屏上可能溢出或压住内容。 修复: - 顶栏结构拆为「标题 / 统计(.stats) / 控件(.controls)」三段; ≤820px 改为纵向三行,统计均分视口宽度,页脚改纵向堆叠 - ≤700px 且用户未显式选择视图时自动用卡片(横竖屏切换时重算, 显式选择仍尊重 localStorage) - ≤820px(及横屏手机)撤掉立绘、公路车、光环水印等固定装饰 验证: - 390x844 / 360x640 / 414x896 / 844x390 四种视口:0 横向溢出,顶栏三行 - verify-views 新增移动端 7 条断言(22/22 通过) - 四套合计 81 项全通过(17+22+20+22)
This commit is contained in:
@@ -262,6 +262,8 @@ UptimeRobot 的探测来自其多个节点,适合作为**异地视角**与自
|
||||
|
||||
指定方式(优先级从高到低):URL 参数 `?view=table|cards` → 浏览器上次选择(localStorage)→ `settings.view` → 表格。
|
||||
|
||||
**移动端**:窄屏(≤700px)在用户没有显式选择过视图时**自动使用卡片**(表格在手机上必须横向拖动,体验差),并在横竖屏切换时重算;顶栏在 ≤820px 改为「标题 / 统计 / 控件」三行,立绘与固定装饰自动撤掉。
|
||||
|
||||
### 数据源过滤
|
||||
|
||||
| 值 | 含义 |
|
||||
@@ -439,6 +441,13 @@ UptimeRobot 的探测来自其多个节点,适合作为**异地视角**与自
|
||||
- [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」,tooltip 内含服务端更新节奏与快照生成时间
|
||||
- [x] `scripts/verify.cjs` 适配纯外部数据源部署(自动跳过不适用的探测类断言),并新增「倒计时对齐服务端」断言
|
||||
|
||||
### v0.8.1 已实现
|
||||
|
||||
- [x] **修复移动端顶栏塌陷**:窄屏(≤820px)改为「标题 / 统计 / 控件」三行布局,统计均分视口宽度,页脚改纵向堆叠 —— 此前统计数字会挤成竖排并压住标题
|
||||
- [x] **窄屏默认卡片视图**(≤700px):表格在手机上必须横向拖动,改由卡片呈现;横竖屏切换时重算,用户显式选过视图则尊重其选择
|
||||
- [x] 窄屏与横屏手机自动撤掉立绘、公路车、光环水印等固定装饰,避免压住内容或溢出
|
||||
- [x] `verify-views` 新增移动端专项断言 7 项(默认卡片 / 无横向溢出 / 顶栏三行 / 统计铺满 / 装饰隐藏 / 页脚不裁切 / 无 JS 错误)
|
||||
|
||||
### v0.8.0 已实现
|
||||
|
||||
- [x] **形象换成简约风插画**(AI 生成 + 抠底,非官方美术素材):右下角全身立绘、logo 与 favicon 用同款半身像;官方立绘/头像已从仓库移除
|
||||
|
||||
Reference in New Issue
Block a user