移动端滚动图片无响应，iPhone6及以下宽度左滚出现边距问题

我来帮你分析这个常见的移动端布局问题——当图片适配iPhone 6及更低尺寸设备时，向左滚动出现左侧边距，这大概率是布局的溢出处理、盒模型计算或视口设置的问题。先对应你提到的两种状态展示：

未滚动时的正常显示：

向左滚动后出现左侧边距的异常状态：

结合移动端布局的常见坑点，我整理了几个可能的原因和对应的解决方法：

• 原因1：容器或页面的横向溢出未处理
  如果图片所在容器或整个页面没有限制横向溢出，滚动时就可能露出额外边距。可以给图片父容器和全局html/body添加溢出控制：

  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 禁止页面整体横向滚动 */
  }
  .image-wrapper {
    width: 100vw; /* 确保容器占满设备视口宽度 */
    overflow-x: hidden;
  }
  

• 原因2：盒模型计算偏差
  若图片使用width:100%但父容器存在默认的padding/border，会导致图片实际宽度超出容器。统一设置盒模型可以解决这个问题：

  .image-wrapper, .image-wrapper img {
    box-sizing: border-box;
  }
  .image-wrapper img {
    width: 100%;
    height: auto; /* 保持图片比例 */
  }
  

• 原因3：视口meta标签设置错误
  移动端页面必须正确配置视口标签，否则设备会以错误的宽度渲染页面。检查HTML头部是否包含：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  

如果能补充你的完整CSS代码，我可以帮你更精准地定位问题根源哦！

内容的提问来源于stack exchange，提问作者Samuel Krut