iPhone 15与小米Mi9的SCSS媒体查询适配异常问题

云上老周

2026-6-28

问题解决思路与方案

问题根源

CSS优先级顺序冲突：你给小米Mi9写的专属媒体查询放在了max-width: 413px规则前面，两者选择器特异性一致，后面的宽泛规则直接覆盖了前面的精确匹配规则。
精确高度匹配不可靠：移动端浏览器的可视高度会随地址栏、状态栏的显示/隐藏动态变化，小米Mi9的实际可视高度大概率不是固定的851px，导致这个条件无法命中。
设备参数可能存在偏差：小米Mi9的设备像素比可能和你设定的2.75有细微差异，或者系统缩放导致参数变化，也会让查询失效。

具体解决步骤

1. 调整媒体查询顺序，让专属规则优先级更高

把小米Mi9和iPhone15的专属媒体查询移到所有max-width规则的后面，这样精确匹配的规则就能覆盖宽泛的max-width规则：

.cities-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem 0;
  grid-gap: 0.9rem;
  gap: 0.9rem;

  // 先放平板及其他通用媒体查询
  @media screen and (width: $device-width-834) and (max-height: $device-height-1194) and (orientation: portrait) {
    justify-content: flex-start;
    grid-gap: 2rem;
    gap: 2rem;
  }

  @media screen and (width: $device-820) and (height: $tablet-1106) and (orientation: portrait) {
    justify-content: flex-start;
    grid-gap: 1.8rem;
    gap: 1.8rem;
  }

  @media screen and (width: $tablet-ipad-small) and (height: $desktop) and (orientation: portrait) {
    justify-content: flex-start;
    grid-gap: 1.6rem;
    gap: 1.6rem;
  }

  // 接着放所有max-width规则
  @media screen and (max-width: $smartphone-435) {
    justify-content: flex-start;
    grid-gap: 3.1rem;
    gap: 3.1rem;
  }

  @media screen and (max-width: $smartphone-415) {
    justify-content: flex-start;
    grid-gap: 2.6rem;
    gap: 2.6rem;
  }

  @media screen and (max-width: $smartphone-413) {
    justify-content: flex-start;
    grid-gap: 3.2rem;
    gap: 3.2rem;
  }

  @media screen and (max-width: $smartphone-390) {
    justify-content: flex-start;
    grid-gap: 2.5rem;
    gap: 2.5rem;
  }

  @media screen and (max-width: $smartphone-380) {
    justify-content: flex-start;
    grid-gap: 2.1rem;
    gap: 2.1rem;
  }

  @media screen and (max-width: $smartphone-375) {
    justify-content: flex-start;
    grid-gap: 1.3rem;
    gap: 1.3rem;
  }

  @media screen and (max-width: $smartphone-365) {
    justify-content: flex-start;
    grid-gap: 1.5rem;
    gap: 1.5rem;
  }

  // 最后放专属设备的媒体查询
  @media screen and (width: $device-width-393) and (-webkit-device-pixel-ratio: 2.75) and (min-resolution: 2.75dppx) {
    justify-content: flex-start;
    grid-gap: 2.7rem;
    gap: 2.7rem;
  }

  @media screen and (width: $device-width-393) and (-webkit-device-pixel-ratio: 3) and (min-resolution: 3dppx) {
    justify-content: flex-start;
    grid-gap: 1.9rem;
    gap: 1.9rem;
  }
}

2. 移除不可靠的精确高度条件

删掉媒体查询里的height: $device-height-851和height: $device-height-852，因为移动端可视高度是动态变化的，精确匹配基本没用：

// 修改后的小米Mi9媒体查询
@media screen and (width: $device-width-393) and (-webkit-device-pixel-ratio: 2.75) and (min-resolution: 2.75dppx) {
  justify-content: flex-start;
  grid-gap: 2.7rem;
  gap: 2.7rem;
}

// 修改后的iPhone15媒体查询
@media screen and (width: $device-width-393) and (-webkit-device-pixel-ratio: 3) and (min-resolution: 3dppx) {
  justify-content: flex-start;
  grid-gap: 1.9rem;
  gap: 1.9rem;
}

3. 验证设备真实参数（可选）

在小米Mi9的浏览器里运行这段代码，看看真实的设备参数：

console.log('屏幕宽度:', window.innerWidth);
console.log('设备像素比:', window.devicePixelRatio);
console.log('当前可视高度:', window.innerHeight);

根据输出调整媒体查询的参数，确保和真实值匹配。

4. 补充标准设备像素比查询（增强兼容性）

除了-webkit前缀，加上标准的device-pixel-ratio查询，适配更多浏览器：

@media screen and (width: $device-width-393) and (device-pixel-ratio: 2.75) and (-webkit-device-pixel-ratio: 2.75) and (min-resolution: 2.75dppx) {
  justify-content: flex-start;
  grid-gap: 2.7rem;
  gap: 2.7rem;
}

额外建议

尽量别针对特定设备写专属规则，优先用视口宽度区间匹配（比如(min-width: 390px) and (max-width: 400px)），这样适配更灵活，也能避免设备参数变化带来的问题。

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