iPhone 15 和小米 Mi9 上的 SCSS 媒体查询问题

Question

我在

React

上有网站，我想使用

SCSS

正确对齐容器中的按钮。我的目标是具有不同屏幕分辨率的多个设备。它运行良好，但我在

iPhone 15

和

Xiaomi Mi9

手机上遇到问题。检查两个设备的

screen.width

时，它返回为

393px

。

iPhone 15：

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

小米9：

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

代码：

.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-393) and (height: $device-height-852) and (-webkit-device-pixel-ratio: 3) and (min-resolution: 3dppx) {
    justify-content: flex-start;
    grid-gap: 1.9rem;
    gap: 1.9rem;
  }

  @media screen and (width: $device-width-393) and (height: $device-height-851) 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-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;
  }

  @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;
  }
}

它无法定位

Xiaomi Mi9

手机并应用

screen and (max-width: 413px)

规则的样式。

截图：

有什么解决办法吗？谢谢你。

Answer 1

我通过检查

max-width: $smartphone-395

的

Xiaomi Mi9

(395px) 并删除高度检查来解决此样式问题：

(height: $device-height-851)

手机的

iPhone 15

(851px)。

代码：

小米9：

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

iPhone 15：

@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;
  }

截图：

现在，问题已经解决了。谢谢你。