viewport标签缺失或参数错误是移动端布局错位的首要原因，必须在head顶部写全，缺一不可，否则浏览器按980px缩放渲染导致尺寸失真、max-width失效。
viewport 元标签漏写或参数错误直接导致错位
几乎所有手机端商品详情页首屏错位、文字缩成一团、按钮点不中的第一原因，就是 标签没加，或加了但 content 值写错。浏览器默认按 980px 宽度渲染，再强行缩放进手机屏幕，所有 CSS 布局逻辑全崩。
必须在 中写死这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
注意三点：
-
user-scalable=no是电商页刚需——禁止双指缩放，避免用户误操作导致布局偏移、图片裁切异常 - 不要用
maximum-scale=1.0，它在 iOS Safari 某些版本中会触发输入框聚焦时页面上跳的 bug - 该标签必须放在所有 CSS
和 JS<script></script>之前，否则部分安卓 WebView 会忽略
图片加载失败或拉伸变形的根源不在 src，而在 width/height 属性
商品详情页里 
正确做法是彻底剥离内联尺寸，交由 CSS 管理：
- 删掉
width和height属性（哪怕只是占位用） - 用
max-width: 100%+height: auto保证等比缩放 - 对轮播图或主图容器加
aspect-ratio: 4/3（支持现代浏览器）或 fallback 的 padding-bottom 技巧 - 关键商品图务必提供
srcset和sizes，例如：
字体和点击热区在低端安卓机上失灵的真正原因
很多团队以为“用了 rem 就响应式了”，结果在红米 Note 8 这类设备上， 点击无反应、文字发虚——问题出在物理像素密度和 touch target 最小尺寸没对齐。
W3C 明确要求触控目标最小为 44×44 CSS px，但低端安卓机的 1px 可能对应 2–3 物理像素，CSS 计算又受 devicePixelRatio 影响。解决方案不是调大字体，而是锁定热区：
- 所有可点击元素（包括
、、SKU 选项卡）必须设min-width: 44px和min-height: 44px - 用
padding扩展热区，而非仅靠文字撑开；避免line-height单独撑高按钮 - 中文正文用
font-size: 16px起步（iOS 最小可读字号），禁用font-size: 14px及以下 - 禁用
touch-action: manipulation—— 它在部分鸿蒙系统中会屏蔽长按复制等必要交互
localStorage 购物车在 iOS Safari 无痕模式下静默失败
商品详情页的“加入购物车”按钮点击后没反应？检查控制台大概率看到 QuotaExceededError。这不是代码写错了，而是 iOS Safari 无痕模式下 localStorage 完全不可写，且不抛异常，只静默失败。
必须做降级处理：
- 执行
localStorage.setItem()前，先用 try/catch 包裹，并检测是否真的写入成功（读回比对） - 失败时 fallback 到内存对象
cart = []，并显示提示：“当前为隐私浏览模式，购物车仅临时保存” - 不要依赖
localStorage同步更新 UI 状态——所有状态变更必须走统一的 cart store，写失败不影响视图渲染 - 若需持久化，必须引导用户登录，走服务端 cart 接口，这是唯一可靠路径
真正在意多端兼容的细节，不在媒体查询写了多少断点，而在于你是否测过 iPhone SE 第一代在弱网下点三次“加入购物车”后，localStorage 是否还剩 12 字节可用空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
