Stephen Gilbert  |  Anchour

iPhone X iPhone 6, 7, & 8 iPhone Plus iPad iPad mini Donate

CSS Media Queries
for iPhone X


Lo and behold, the long awaited media queries for the latest and greatest iPhone from the holiness at Apple. Enjoy, and hope these codes help!

iPhone 10 Media Queries

iPhone X in portrait & landscape

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

iPhone X in landscape

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

iPhone X in portrait

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

iPhone X Resolution

Screen Width = 375px (CSS Pixels)
Screen Height = 812px (CSS Pixels)

Screen Width = 1125 (Actual Pixels)
Screen Height = 2436 (Actual Pixels)

Device-pixel-ratio: 3
Updated on

Donate

Was this page useful to you? Please consider donating so I can take these disgusting ads off this useful page. They are ugly but they make money.