Shopify 移动端布局错乱但桌面正常怎么修

现象#

手机上内容溢出屏幕、按钮被挤到看不见，桌面端完全正常。

原因#

• 固定宽度（如 width: 1200px）未做响应式
• 图片或 iframe 未设 max-width: 100%
• 表格、长英文单词撑破容器
• 移动端菜单层级与 z-index 冲突

处理步骤#

1. 用真机或 DevTools 设备模式定位溢出元素（document.scrollWidth 对比）
2. 容器改 max-width + width:100%，图片加 max-width:100%;height:auto
3. 长文本加 overflow-wrap: anywhere
4. 检查 viewport meta 是否存在且为 width=device-width

验收标准#

390px 宽度下无横向滚动，所有内容可读可点，桌面端样式不受影响。