Media Queries to identify notch

Asked

Viewed 64 times

2

Does anyone have a complete solution to identify all the phones that have this "notch" in the existing market versions? Currently I am using these strategies, but I’m still having problems with some versions of cell phones that do not have notch, but are identified as if they had:

$margin_max_constant_notch:unquote('max(-12px, constant(safe-area-inset-left))');
$margin_max_env_notch:unquote('max(-12px, env(safe-area-inset-left))');


/*** iphone X 1.11, iphone XS (obs: ',' é representação de OR) ***/
@media only screen
and (device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3),
 /*** iphone XR ***/
screen and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2),
  /*** iphone XS Max ***/
screen and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3),
  /*** iphone XS Max Retina ***/
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 458dpi),
only screen and (                min-resolution: 3dppx),
/** Google Pixel 3 XL  **/
screen and (device-width: 360px)
and (device-height: 740px)
and (-webkit-min-device-pixel-ratio: 4),
only screen and (   min--moz-device-pixel-ratio: 4),
only screen and (     -o-min-device-pixel-ratio: 4/1),
only screen and (        min-device-pixel-ratio: 4),
only screen and (                min-resolution: 523dpi),
only screen and (                min-resolution: 4dppx) {

    @media(orientation: portrait) {

       //celular na vertical

       //global CSS

        @media (max-width: 768px) {
         //até 768px
        }

        @media (max-width: 480px) {
         //até 480px
        }

       @media only screen and (max-width: 400px) {
           //até 400px
        }


    }
    @media(orientation: landscape) {
        html,body {
            padding: $margin_max_constant_notch;
            padding: $margin_max_env_notch;
        }

        //celular na horizontal

        @media screen and (max-width: 900px) {

          //até 900px
        }

    }
}

/** iphone X 1.12 **/
@supports(padding: max(0px)) {
@media screen and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {
    @media(orientation: portrait) {

       //celular na vertical

        @media (max-width: 768px) {
           //até 768px
        }

        @media (max-width: 480px) {
         //até 480px
        }

        @media only screen and (max-width: 400px) {
        //até 400px
        }

      }
      @media(orientation: landscape) {
        html, body {
          padding: $margin_max_constant_notch;
          padding: $margin_max_env_notch;
        }

        @media screen and (max-width: 900px) {
         //até 900px
        }
      }
   }
}

/** iphone 8 **/
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2),
  /** iphone 8 PLUS **/
screen  and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) {
  @media(orientation: portrait) {

  //celular na vertical

  }
  @media(orientation: landscape) {

  //celular na horizontal
  }
}

@media only screen
  /** IPADS **/
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {

 //para ipads

  @media(orientation: portrait) {

  //ipad na vertical

  }
  @media(orientation: landscape) {

  //ipad na horizontal
  }

}
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.