iPhone XR / XS / XS Max CSS media queries

Handling the Notch on iPhone X / XR / XS / XS Max OR iPhone media queries for responsive design  -

Media queries are very useful to modify your website or hybrid apps depending on a device resolution/type. This is very important to manage resolution in different devices. It help us to present batter view of app/website to users. Below are the examples for iPhone XR / XS / XS Max CSS media queries -


/* Apple iPhone XR 1792x828px at 326ppi Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { }

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

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


Below are the examples for iPhone X / 8 / 8 Plus CSS media queries -

/* Apple iPhone X Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

/* Apple iPhone 8 Media Queries */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

/* Apple iPhone 8 Plus Media Queries */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }



Note : If you are looking for a specific orientation. Follow below rules -

For portrait orientation add below rule :

    and (orientation : portrait) 


For landscape orientation add below rule :

    and (orientation : landscape) 



Now use above media query in your project. It helps me a lot. If you have any query please post in a comment. 

For other all Media Queries please check this link - https://allexperts16.blogspot.com/2018/06/media-queries-for-standard-devices.html

It has Media Queries for - iPads, iPad 3, iPhone 4, iPhone 5, iPhone 6, iPhone 6+, Samsung Galaxy S3, Samsung Galaxy S4, Samsung Galaxy S5, and many more.