手机端商品页错位的根本原因是viewport、容器行为、图片缩放、断点逻辑四者未对齐；需写全viewport三要素并置head最前，主图文字用flex且避免height:100vh，图片加max-width:100%，断点按内容宽度而非设备型号设置。

商品详情页在手机上错位、图片溢出、按钮点不中，根本原因不是“没写响应式”，而是 viewport、容器行为、图片缩放、断点逻辑四者没对齐——漏掉任意一环，小屏就翻车。

viewport 标签必须写全且位置正确

只写 是最常见的失效起点。它会让 iOS Safari 先按 980px 渲染一次再重排，造成闪动或布局错乱。

必须三项齐备，并放在 最前面、所有 CSS 之前：

• width=device-width：让视口宽度等于设备 CSS 像素宽度（如 iPhone 15 Pro 是 430px）
• initial-scale=1.0：禁用加载后自动缩放，否则安卓 WebView 可能渲染异常
• maximum-scale=1.0, user-scalable=no：电商类页面需锁定缩放，避免双击放大崩布局（但注意：纯展示页慎用，影响可访问性）

主图+文字侧边布局用 flex，但别碰 height: 100vh

左右结构在桌面端常见，但直接套到手机上容易塌陷——尤其 iOS Safari 在图片加载前就完成渲染，若父容器无高度参照，align-items: center 就彻底失效。

正确做法：

• 父容器设 display: flex; align-items: flex-start;（不是 center），避免依赖未加载的图片高度
• 图片侧固定宽度（如 width: 480px），但必须加 max-width: 100%; height: auto;，否则小屏溢出
• 文字侧用 flex: 1 自适应，别再套多余
  ，否则 margin/padding 干扰对齐
• 移动端切为上下结构：@media (max-width: 768px) { flex-direction: column; }，而非靠 float 或负 margin 硬推

价格和购买按钮必须语义化包裹

把 ¥199 和 立即购买 散落在不同 div 里，后续 JS 控制库存状态（如缺货时禁用按钮）就会失效。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

结构上必须共用一个容器：

<section class="action-bar"><span class="price">¥<strong>199</strong></span>
  <button type="button" class="buy-btn">立即购买</button>
</section>

关键细节：

• 按钮必须带 type="button"，防止误触提交表单
• 禁用态不能只靠 opacity: 0.5，要同步加 pointer-events: none 和 cursor: not-allowed，否则移动端仍可点击
• 价格数字单独包裹 ，方便后期加动画或动态更新

图片加载和断点逻辑别只看设备宽度

@media (max-width: 767px) 这种写法在平板横屏（内容区实际只有 600px 宽）时不会触发，导致样式断层；而只写 img { max-width: 100%; height: auto; } 会忽略弱网下首屏白屏问题。

真实可用的组合策略：

• 断点按内容容器宽度设，比如 @media (max-width: 48em)（即 768px），而不是设备型号
• 图片用 srcset + sizes 提供多分辨率资源，例如：
• 主图区域加 min-height: 100vh（不是 height: 100vh），避免内容撑高后底部留白或滚动错位

最易被忽略的是：当断点内切换了父容器的 display 类型（如从 block 改为 flex），已写的 text-align: center 会失效，必须同步删掉——这种细节不查 DOM 检查器根本看不到。