|
@@ -68,6 +68,33 @@
|
|
|
- **一个低成本的前置动作(尚未做)**:把 `index.html` 里写死的 `globalThis.isXF = false`
|
|
- **一个低成本的前置动作(尚未做)**:把 `index.html` 里写死的 `globalThis.isXF = false`
|
|
|
**改成环境变量开关** —— 这样万一厂商出问题,改配置就能切到讯飞分支,不必改代码重新发版。
|
|
**改成环境变量开关** —— 这样万一厂商出问题,改配置就能切到讯飞分支,不必改代码重新发版。
|
|
|
|
|
|
|
|
|
|
+### 7. 移动端真机样式问题:没有兼容基线,且布局依赖 JS 测量
|
|
|
|
|
+
|
|
|
|
|
+- **是什么**:用户反馈**真机**上(F12 模拟正常)①首页展示不全 ②思考过程文案超出屏幕
|
|
|
|
|
+ ③**不同浏览器问题还不一样**。排查后确认三个相互独立的根因:
|
|
|
|
|
+ 1. **`height: 100dvh` 没有 `100vh` 兜底**(`BusinessAssistantMobile.vue`)——
|
|
|
|
|
+ `dvh` 是较新的单位(Chrome 108+ / Safari 15.4+),国产浏览器内核多基于更老的版本
|
|
|
|
|
+ → 该声明被整条丢弃 → 容器高度塌陷,而外层是 `overflow: hidden` → **内容被裁掉**
|
|
|
|
|
+ 2. **没有 `text-size-adjust: 100%`** —— 移动端浏览器会按各自策略自动放大文字,
|
|
|
|
|
+ 各家不同 → 同一份文案在不同手机上长度不同(也是"不同浏览器不一样"的直接来源)
|
|
|
|
|
+ 3. **思考过程卡片的样式靠 JS 测量 + `width: max-content` 决定**「单行省略 vs 换行」:
|
|
|
|
|
+ `updateMaxWidthReached()` 用 `getBoundingClientRect()` 比卡片与父容器宽度。
|
|
|
|
|
+ 而字体首选 `"HarmonyOS Sans SC"`(**手机多无此字体 → 回退到系统字体**)→ **字宽不同**
|
|
|
|
|
+ → 测量结果不同 → 该换行时判成"没撑满" → 单行 `nowrap` 撑出屏幕
|
|
|
|
|
+- **为什么先欠着**:**需用户提供信息/确认改法**(见下),且其中一条会改变观感
|
|
|
|
|
+- **欠着会怎样**:移动端(本项目的主要使用场景)体验不稳定,且**换台手机就可能变样**
|
|
|
|
|
+- **该还的条件**:
|
|
|
|
|
+ 1. 用户提供**具体浏览器与版本**、以及能否**真机远程调试**(Android 用 `chrome://inspect`
|
|
|
|
|
+ 最省事)—— 没有这个只能猜
|
|
|
|
|
+ 2. 方案 A(低风险、可立刻做):`dvh` 加 `vh` 兜底、全局 `text-size-adjust: 100%`、
|
|
|
|
|
+ 给 flex 链补 `min-width: 0`
|
|
|
|
|
+ 3. 方案 B(**建议做**,但要用户确认观感变化):**去掉「按宽度切样式」这套测量**,
|
|
|
|
|
+ 改为纯 CSS —— 标题恒定单行省略、正文恒定可换行,删掉 `is-max-width-reached`
|
|
|
|
|
+ 与 `width: max-content`。现在这套**先天不稳定**(字体/时机/内核都会影响测量)
|
|
|
|
|
+ 4. 方案 C(机制):定**浏览器兼容基线** + 加 `browserslist`;
|
|
|
|
|
+ 项目当前**没有任何 browserslist / postcss 降级配置**,而代码里用了
|
|
|
|
|
+ `dvh`(4) / `gap`(151) / `inset`(22) / `backdrop-filter`(24) 等较新特性
|
|
|
|
|
+
|
|
|
## 已还
|
|
## 已还
|
|
|
|
|
|
|
|
(还清后从上面移到此处,保留一行说明怎么还的,便于追溯)
|
|
(还清后从上面移到此处,保留一行说明怎么还的,便于追溯)
|