iPhone X and iPhone XS Apply CSS

Hello Expert,

I have a mobile app in which I need to apply some CSS only for iPhone XS not for iPhone X,but when I am trying to apply Media query in iPhone XS in that case it also applying in iPhone X because both the device having same media query as below

@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)and (orientation : portrait) { My Custom CSS for iPhone XS only }


So we need to find the difference between iPhone X and XS,So that I can apply the CSS only for iPhone XS.

Found this on a website, haven't tried it myself though:

iPhone X

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone Xs

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }


Salman Ansari wrote:

Hello Expert,

I have a mobile app in which I need to apply some CSS only for iPhone XS not for iPhone X,but when I am trying to apply Media query in iPhone XS in that case it also applying in iPhone X because both the device having same media query as below

@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)and (orientation : portrait) { My Custom CSS for iPhone XS only }


So we need to find the difference between iPhone X and XS,So that I can apply the CSS only for iPhone XS.

I not sure whether it will work or not but you should give a try this one.

when the mobile application adopt the screen it adds some classes related to the device.

this screen is from iPhone x so if you want to write the CSS for iPhone x


use this class instead of the media query.

.iphonex{

your css

}


i might think the same will be applicable with 

.iphonexs{

your css

}



Regards,

Pankaj

Thank you for reply will try both solution