103c8aa059
- 删除全部 iPhone 外壳代码（Dynamic Island / 状态栏 / 侧边按钮 / 相机条 / Home Indicator） - 从 620 行精简到 200 行 - 改为 375px 固定宽度纯内容面板，CSS 与小程序 article/detail 完全一致 - 内容区自然流动高度 + 滚动，不再被外壳约束 - 顶部简洁标签栏「小程序端效果预览 · 375px」 - 新增头脑风暴讨论记录 docs/discussions/2026-05-11
32 lines
1.5 KiB
Markdown
32 lines
1.5 KiB
Markdown
# 文章编辑器手机预览方案头脑风暴
|
||
|
||
> 日期: 2026-05-11 | 参与者: 用户 + Claude
|
||
|
||
## 背景
|
||
|
||
文章编辑器右栏的手机预览（iPhone 17 Pro Max 仿真）效果差：
|
||
1. 手机外壳占据大量像素，内容区被压缩
|
||
2. 手机高度不可控，内容多了无限拉长
|
||
3. styled-block 模板在窄屏下渲染错乱
|
||
4. 用户目标是看「小程序上文章长什么样」，不是看一台手机
|
||
|
||
## 5 个候选方案
|
||
|
||
| 方案 | 用户体验 | 实现复杂度 | 维护成本 | 推荐度 |
|
||
|------|---------|-----------|---------|--------|
|
||
| A: 去壳化纯内容预览 | 内容完整可读 | 极低（删代码） | 最低 | ⭐⭐⭐⭐⭐ |
|
||
| B: 等比缩放 scale | 比例正确但文字小 | 中等 | 中高 | ⭐⭐ |
|
||
| C: iframe 独立页面 | 理论最接近实际 | 高 | 高 | ⭐ |
|
||
| D: 迷你手机+点击放大 | 工作流被割裂 | 中高 | 高 | ⭐⭐ |
|
||
| E: 标签切换多设备 | 当前无桌面端需求 | 低 | 低 | ⭐⭐⭐（渐进扩展） |
|
||
|
||
## 结论
|
||
|
||
**推荐方案 A（去壳化）**：去掉 iPhone 外壳，保留 375px 窄屏内容面板，CSS 与小程序 article/detail 完全一致。渐进可扩展方案 E（标签切换多设备宽度）。
|
||
|
||
核心论据：
|
||
- 编辑器预览的目标是验证内容排版，不是仿真设备
|
||
- 去掉外壳后内容区从 ~285px 扩展到 375px，可读性直接提升
|
||
- 公众号后台、飞书文档、Notion 的移动端预览全部采用去壳化方案
|
||
- 实现成本 = 删除 200 行外壳代码 + 微调布局
|