Iphone xr media query css

By | November 16, 2020

Hello, Are you are facing any design issue on your website while using iPhone XR? or worried about how to fix that issue?

I have a solution for you through which you can easily fix the website responsive issue for your iPhone XR view.

Most of the famous browsers don’t include an iPhone XR emulator so we can fix the issue through the browser easily.


You can add a custom device in any browser by going to the mobile view and add a custom device with width: 414px, height: 896px, and ratio: 2


Media query for iPhone XR to add any custom CSS in your website

/* iPhone XR */
@media only screen
and (min-device-width: 414px)
and (min-device-height: 896px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
/* styles */

I hope this could help you.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *