媒体查询在iPhone 6不生效且桌面端有右边距的问题求助

我来帮你一步步排查和解决这个问题，你的核心问题应该是媒体查询样式未正确覆盖默认样式，再加上flexbox布局和宽度设置的小疏漏，咱们逐个击破：

1. 修正最关键的宽度设置 #

你期望图片占满屏幕宽度，但媒体查询里写了width: 400px——iPhone 6的设备宽度是375px，这个值明显超过了屏幕宽度，反而会导致横向滚动或被父容器束缚出现边距。直接把宽度改成width: 100%：

@media only screen and (max-width: 480px) {
  .food {
    height: 265px;
    width: 100%; /* 改成100%实现全屏宽度 */
    padding: 0;
    position: relative;
    top: 7rem;
  }
}

2. 确保viewport标签的正确位置 #

虽然你加了viewport标签，但如果它放在<head>的靠后位置（比如在其他meta、link或script标签之后），部分移动端浏览器可能无法正确解析。把它放在<head>最顶部，紧跟字符编码标签：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 其他标签放在后面 -->
</head>

3. 排查flexbox父容器的限制 #

既然怀疑flexbox的问题，重点检查.food的父元素：

• 父容器是否设置了flex-wrap: wrap;？如果没有，子元素会强行在一行排列，无法堆叠。
• 父容器有没有padding-left/padding-right或margin？如果有，即使子元素设了100%宽度也无法占满屏幕，需要在媒体查询里同步移除父容器的左右内边距：

@media only screen and (max-width: 480px) {
  .food-parent { /* 替换成你的父容器类名 */
    padding-left: 0;
    padding-right: 0;
  }
  .food {
    /* 你的样式 */
  }
}

• 父容器有没有设置max-width？如果父容器的max-width小于屏幕宽度，会直接限制子元素的宽度表现。

4. 提高媒体查询样式的优先级 #

有时候默认的.food样式优先级更高（比如用了更具体的选择器或!important），导致媒体查询样式被覆盖。可以：

• 给媒体查询里的选择器增加权重，比如body .food或.parent-container .food
• 临时加!important快速验证问题（不推荐长期使用，仅做测试）：

@media only screen and (max-width: 480px) {
  .food {
    width: 100% !important;
    /* 其他样式 */
  }
}

5. 全局设置box-sizing避免宽度计算异常 #

添加全局的box-sizing规则，确保元素的padding和border不会额外增加宽度，避免出现意料之外的边距：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

6. 针对iPhone 6的精准媒体查询（可选） #

如果上述方法仍不生效，可以用更精准的规则匹配iPhone 6竖屏：

@media only screen and (max-width: 375px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  .food {
    /* 你的样式 */
  }
}

按照这些步骤调整后，应该就能解决媒体查询不生效和图片无法占满屏幕的问题了。

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