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