ionic media query iphone 11 pro max code example

Example: ionic media query iphone 11 pro max

// iPhone 12 Mini, iPhone 11 Pro, iPhone Xs, and iPhone X
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {
    @content;
}
// iPhone 12 and iPhone 12 Pro
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
    @content;
}
// iPhone 12 Pro Max
@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
    @content;
}
// iPhone 11 and iPhone XR
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-device-pixel-ratio: 2) {
    @content;
}
// iPhone 11 and iPhone XR
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-device-pixel-ratio: 2) {
    @content;
}
// Phone 11 Pro Max and iPhone Xs Max
@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-device-pixel-ratio: 3) {
    @content;
}

Tags:

Misc Example