# 文章编辑器手机预览方案头脑风暴

> 日期: 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 行外壳代码 + 微调布局