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 screenand (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:
/* 2436x1125px at 458ppi */ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }
/* 2688x1242px at 458ppi */ @media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
Salman Ansari wrote:
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{
Regards,
Pankaj
Thank you for reply will try both solution