移动端网页图片与文本偏移问题求助：内容右移如何修复？

• 检查全局容器宽度：避免给body或主容器设置固定像素宽度（如width: 1200px），替换为max-width: 1200px; width: 100%;，让容器在移动端自适应视口宽度，不会因超出视口导致内容偏移。
• 清除默认边距：给body添加margin: 0; padding: 0;，多数浏览器默认给body设置了边距，这会在移动端造成内容偏移。
• 控制图片尺寸：给所有图片添加max-width: 100%; height: auto;，防止图片宽度超出容器，撑开页面产生横向滚动，视觉上造成内容右偏的错觉。
• 确保容器居中：主内容容器添加margin: 0 auto;实现水平居中，同时可设置width: 90%;预留左右边距，提升移动端浏览体验。
• 禁用横向滚动：给body添加overflow-x: hidden;，强制隐藏横向滚动条，避免因元素溢出导致的偏移问题。

参考代码示例 #

/* 全局基础样式重置 */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* 主内容容器自适应 */
.main-content {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

/* 图片自适应处理 */
img {
  max-width: 100%;
  height: auto;
}

内容的提问来源于stack exchange，提问作者Mien Thao