移动端电商首页主结构必须用 display: grid 或 flex，禁用 float 和绝对定位；viewport 必须唯一且置于 head 顶部；商品列表优先用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))；导航与 tab 用 position: sticky 而非 fixed；点击区域需满足 min-height: 44px 且 line-height ≥ 1.4。
移动端电商首页必须用 display: flex 或 display: grid 做主结构，硬套 float 或绝对定位会直接导致在 iPhone Safari 和 Android Chrome 上错位、文字截断、点击区域失效。
viewport 设置不正确，整个页面就废了一半
很多新手复制了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，但没检查是否被重复插入或放在 外。实际错误现象包括：页面被缩放成“小地图”、左右可滑动、字体忽大忽小。
- 必须确保该
<meta>标签只出现一次，且位于最顶部（紧贴<title></title>前） - 不要加
user-scalable=no——它会让视障用户无法放大阅读，国内《无障碍环境建设法》明确禁止 - 如果用了 Webpack/Vite 构建，检查 HTML 插件是否自动注入了另一份 viewport，造成冲突
商品列表用 display: grid 而不是 flex-wrap
用 flex-wrap: wrap 做商品格子，在 iOS 16+ Safari 中容易出现最后一行对不齐、间隙忽大忽小；而 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 能稳定撑满容器宽度，且自动适配横竖屏切换。
-
minmax(280px, 1fr)中的280px是底线——保证单列商品图不被压扁（iPhone SE 屏宽 375px，留出左右边距后约 320px 可用） - 别写
repeat(3, 1fr)：平板横屏时会强行挤出三列，导致图片过窄、文字换行难读 - 每张商品图必须设
object-fit: cover+height: 0; padding-bottom: 100%（响应式正方形占位），否则加载中空白高度塌陷，触发页面跳动
导航栏和底部 tab 必须用 position: sticky，不是 fixed
position: fixed 在 iOS Safari 中会导致滚动卡顿、输入框弹起时 navbar 错位、甚至触发页面白屏；sticky 才是移动端真正可靠的“吸附”方案。
立即学习“前端免费学习笔记（深入）”；
-
top: 0的 sticky 导航栏，父容器需有明确高度（不能是min-height: 100vh），否则 Safari 认为无滚动上下文，sticky 失效 - 底部 tab 栏加
bottom: 0时，务必设z-index: 100并确认没有父级transform或will-change——这两者会让 sticky 元素脱离粘性上下文 - 别给 sticky 元素设
width: 100vw：iOS 滚动时会因地址栏隐藏/显示导致宽度突变，改用width: 100%+margin: 0 auto更稳
最易被忽略的是：所有点击区域（按钮、商品卡片、tab 项）必须满足 min-height: 44px 且内部文字 line-height 不小于 1.4，否则 iOS VoiceOver 会跳过识别，也违反 WCAG 2.1 AA 级标准。
