Shopify 移动端 viewport 写错导致整页抖动

现象#

手机上首屏先按 980px 虚拟宽度排版再缩放，图片与标题在 300ms 内横向弹一下，CLS 0.24。

原因#

• 缺 width=device-width 时移动浏览器按 980px 虚拟视口排版，随后整体缩放
• initial-scale 写成 0.8 或 1.2 与 device-width 冲突，触发第二次布局
• 主题 JS 在滚动时改写 viewport 的 content，浏览器每次都重新计算视口
• 固定宽度容器在窄屏溢出，产生横向滚动条并挤压可视高度

处理步骤#

1. 确认 head 里只有一条 viewport meta：width=device-width, initial-scale=1
2. 删掉 JS 里对 viewport 的 setAttribute 改写，改用 CSS 处理断点
3. 固定宽度容器改成 max-width: 100%，图片补 height: auto
4. 在设备模式下看 Layout Shift Regions 是否仍有横向位移
5. 用 PageSpeed 移动端重跑，对比 CLS 与该页面的字段数据

验收标准#

移动端首屏无横向位移，CLS 从 0.24 降到 0.05 以下，页面不出现横向滚动条。