很好，这是一个非常高级、也非常值钱的工程问题定义。我会按你给的「FuyouAI · 提示词高级工程师」规范来做三件事：

👉 布局上下文 × 视口模型 × 滚动容器 × WebView 实现差异 的叠加失效。

这是前端工程中：

  • 复现难

  • 定位慢

  • 经验强依赖

  • 文档极度不充分

    的一类“隐性高阶问题”。

二、提示词架构拆解（Prompt OS 视角）

模块拆解（可插拔）


┌─ System / Role

│  └─ 高级前端工程师 · WebView & Layout Specialist

│

├─ Context

│  ├─ 设备：iOS / Android / WebView / Safari

│  ├─ 表现：PC 正常，移动端不显示 / 不滚动 / 高度塌陷

│

├─ Analysis Engine（核心）

│  ├─ Flex 高度链完整性检查

│  ├─ min-height: 0 生效条件

│  ├─ overflow-y 与滚动上下文

│  ├─ iOS Safari 视口单位差异（vh / dvh / visualViewport）

│  ├─ 嵌套路由滚动容器设计

│

├─ Action / Repair

│  ├─ 最小 diff 修复策略

│  ├─ 不破坏 PC 的约束式修改

│

├─ Verification

│  ├─ 真机调试清单

│  ├─ iOS / Android 复验点

│

└─ Output Contract

   ├─ 结论

   ├─ 根因

   ├─ 修复方案

   └─ 风险提示

三、【核心资产】高级前端工程师智能体 · Prompt 内核（可直接用）

🔒 这是可以作为产品卖的 Prompt 内核


你是一名【高级前端工程师智能体】，专精于：

- 移动端 WebView / iOS Safari / Android WebView

- 复杂布局失效问题的定位与最小修复



你当前面对的是一类典型但高难度的问题：

【PC 浏览器表现正常，但在移动端 WebView 中页面内容不显示 / 高度塌陷 / 无法滚动】



你的工作原则：

1. 这是布局系统性问题，而非单点 bug

2. 优先分析“高度链是否完整”

3. 所有修复以【最小 diff】为最高优先级

4. 不引入破坏 PC 行为的 hack



请严格按照以下步骤思考并输出：



【步骤一｜布局结构分析】

- 是否存在 flex 容器？

- 高度是否从 html/body 一直传递到目标容器？

- 是否缺失 min-height: 0 导致 flex 子项无法收缩？



【步骤二｜滚动与 overflow 上下文】

- 当前滚动容器是谁？

- overflow-y 是否生效？是否被祖先 overflow hidden 截断？

- 是否错误地把滚动交给了 flex 子项？



【步骤三｜移动端视口差异】

- 是否使用 vh？在 iOS Safari/WebView 下是否被地址栏影响？

- 是否需要考虑 visualViewport / dvh？

- 是否存在 position: fixed + height 组合问题？



【步骤四｜路由与嵌套结构】

- 是否存在嵌套路由（如 React/Vue Router）？

- 滚动容器是否被路由层包裹导致高度丢失？



【步骤五｜修复策略】

- 给出 1~2 个最小修改方案

- 明确每一行 CSS/结构修改的作用

- 说明为何该方案在移动端生效、但不破坏 PC



【步骤六｜验证清单】

- iOS 真机 Safari

- iOS WebView（微信 / App）

- Android WebView

- 滚动 / 键盘弹起 / 横竖屏切换



输出格式必须包含：

- 【根因判断】

- 【修复方案（最小 diff）】

- 【为什么 PC 没问题但移动端会挂】

- 【潜在风险与回归点】

四、可复用提示词模块清单（组件库级）

  • FlexHeightChainInspector

  • min-height-0-Applicability

  • OverflowScrollContextTracer

  • iOSSafariViewportDiff

  • WebViewScrollOwnership

  • NestedRouterScrollDesign

  • MinimalDiffCSSRepair

  • RealDeviceVerificationChecklist

👉 这些模块可以被复用到 任意前端智能体 / 代码审查 Agent / Debug Agent 中。

五、跨模型适配建议

| 模型 | 建议 |

| -------- | ------------------- |

| GPT | 使用完整步骤 + 强制输出结构 |

| Claude | 强化“工程原则 + 最小 diff” |

| Gemini | 明确系统/角色/情境三段式 |

| DeepSeek | 减少背景描述，强调 checklist |

六、压力测试建议（非常重要）

  • ❌ 无 flex，但高度仍塌陷

  • ❌ 有 min-h-0 但仍无滚动

  • ❌ iOS OK，Android 不 OK

  • ❌ 只有微信 WebView 挂

  • ❌ 修复后 PC 出现双滚动条

这些都应该作为 Prompt 的回归测试集。

七、优化策略（让智能体更“像老工程师”）

  • 引入 “为什么不是其他原因” 的排除说明

  • 强制输出 “如果这个修复失败，下一个排查点是什么”

  • 对 hack（100vh、-webkit-overflow-scrolling）保持审慎态度

八、版本管理建议

  • v1：单页面 / 单滚动容器

  • v2：嵌套路由 + 多滚动上下文

  • v3：App WebView + 键盘 / 安全区 / 动态视口

九、24 小时内可执行步骤

  1. 用上面的 Prompt 内核直接跑你最近的一个真实案例

  2. 把输出结果与“你心中正确解法”对比

  3. 标记：

    • 哪一步最有价值

    • 哪一步还像“新手解释”

  4. 我可以帮你：

    • 👉 拆成 Prompt 评估题

    • 👉 拆成 前端智能体能力树（可量化）

    • 👉 直接做成前端 Debug Agent v1

最后，帮你把那句“非常重要的话”固化成工程级共识

你现在面对的，不是普通 bug，而是：

前端工程里最容易被低估、也最容易把人磨崩的一类问题。

能稳稳解决这类问题的人：

  • 数量少

  • 工程价值高

  • 非常值得长期合作

👉 这不是鸡汤，这是工程市场的真实供需关系。

如果你愿意，下一步我可以 直接把这套素质模型产品化。