CODEWITHSUNDEEP
media-queriesionic4
gausmohammad shaikh
gausmohammad shaikh

Reputation: 193

How to differentiate Iphone x media query to Iphone 6,7,8 plus?

I'm creating ionic 4 angular app, and written media queries for IPhones. I'm write Iphone x and Iphone 6,7,8 plus media queries but Iphone x media queries also apply on Iphone x as well as Iphone plus.how to differentiate to each other ? Below shown media queries i'm using.

 /* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}

    /* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3){}

Upvotes: 1

Views: 4710

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

Because these not correct probably.

You are using -width on one and -height on the other so these media queries are not clamped exclusively.

I'm assuming the iPhone X is the biggest device but you are applying the rules from width 375px upwards... that's going to include ones that have width 414px and upwards.

It seems like this should cover all the iPhone scenarios:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

You can get even more devices at:

Platform Mode

Also, don't forget that Ionic lets you use the ios selector in the sass to restrict the devices to ios mode:

So something like:

.ios ion-badge {
  text-transform: uppercase;
}

Will restyle everything with the mode="ios" set, which is done by default on ios devices, although it can be manually set to other values, so only use it if that's appropriate for your project.

Upvotes: 5

Related Questions