Search code examples
csssassmedia-queries

Issue with SCSS media query on iPhone 15 and Xiaomi Mi9

I have website on React and I want to properly align buttons in the container using SCSS. I target multiple devices with different screen resolutions. It works well but I have issue on iPhone 15 and Xiaomi Mi9 phones. When checking the screen.width for both devices it returns as 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;
  }

Xiaomi Mi9:

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

Code:

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

It fails to target Xiaomi Mi9 phone and applies the style for screen and (max-width: 413px) rule.

Screenshot: enter image description here

Any ideas how to fix it? Thank you.

Solution

  • I have fixed this style issue by checking max-width: $smartphone-395 (395px) for Xiaomi Mi9 and removig the check for height: (height: $device-height-851) (851px) for iPhone 15 phone.

    Code:

    Xiaomi Mi9:

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

    Screenshot:

    enter image description here

    It looks great on both phones. Now, the issue is resolved. Thank you.