viewport标签必须写对且放最前：正确写法是，需硬编码在最顶部，早于所有样式和脚本，不可动态插入。

viewport 标签必须写对且放最前

商品详情页在手机上文字小、图片溢出、点击区域错位，八成是 没生效。它不是可选项，而是浏览器渲染的“启动开关”。只写 width=device-width 不够，iOS Safari 会先按 980px 渲染再缩放，导致 touch 坐标偏移、媒体查询断点失效。

正确写法（最小可用组合）：，且必须硬编码在 最顶部，早于所有 和 <script></script>。不要用 JS 动态插入，也不要依赖 SSR 在客户端补 —— iOS 和多数 Android WebView 首次渲染后就忽略它。

慎用这些参数：user-scalable=no 会禁用双指缩放，WCAG 不达标；maximum-scale=1.0 在 iOS 13+ 会被降权提示；width=375 这类固定值在横屏、折叠屏、模拟器下直接崩。

主图与描述用 flex 布局，但要防老 iOS 失效

商品主图和文字描述左右不对齐、间距忽大忽小，本质是容器级关系没控住。别用 float 或绝对定位硬推，推荐用 display: flex，但得绕过老系统坑：

• 父容器必须设 display: flex; align-items: flex-start;（不是 center，否则图片加载前高度为 0，iOS Safari 9–11 直接失效）
• 图片侧固定宽度（如 width: 480px），但必须加 max-width: 100%; height: auto;，否则小屏溢出
• 文字侧用 flex: 1; 自适应，但 iOS 12 及更早版本会吃掉子元素的 min-width —— 若里面有个“立即购买”按钮写了 min-width: 200px，它会被压成 0 宽。改用 flex-shrink: 0; 或 width: max-content; flex: 0 0 auto;
• 移动端切列布局时，用 @media (max-width: 48em) 改 flex-direction: column;，别写 text-align: center 再覆盖，容易冲突

图片和字体缩放不能只靠 CSS 响应式

img { max-width: 100%; height: auto; } 是基础，但商品页有三个隐藏问题：

弱网下大图加载慢 → 必须用 srcset + sizes 提供不同分辨率资源，例如：；

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

字体在小屏上太小或太大 → rem 基准不能等 DOM 加载完再算。JS 在 DOMContentLoaded 里执行 document.documentElement.style.fontSize 会造成闪屏。可靠做法是内联 （假设设计稿宽 375px）；

iOS 键盘弹出时 window.innerWidth 不变但视口被压缩 → 若你用 JS 动态算 rem，输入框可能被顶出屏幕。加 text-size-adjust: 100% 抑制系统字体放大叠加效应。

别在 上直接写 display: flex

常见错误：为“居中内容”把 display: flex 加到 上，结果导航栏、页脚全乱套。因为 的直系子元素（比如

、

、

）全部变成 flex item，顺序和尺寸全失控。

正确做法：只对具体功能区块设 flex，例如商品主图区、规格选择区、详情图文区。每个区块用独立容器包裹，控制范围清晰。若需垂直居中某张图，确保其父容器有明确高度参照（如 min-height: 100vh），而不是依赖 height: 100vh —— 后者在内容撑高后易留白或滚动错位。

老 iOS（≤ iOS 12）不继承 flex 容器的 height，所以 height: 100% 常失效，优先用 min-height。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！