Skip to content

Instantly share code, notes, and snippets.

@hoyangtsai

hoyangtsai/iPhoneX.css

Created November 27, 2018 04:52
Show Gist options
  • Save hoyangtsai/10a3d22f97d7b10288b46067c8906808 to your computer and use it in GitHub Desktop.
Save hoyangtsai/10a3d22f97d7b10288b46067c8906808 to your computer and use it in GitHub Desktop.
Download ZIP
IPhone X, Xs Max and XR media query
Raw
iPhoneX.css
/* iPhone X and Xs Max */
@media only screen
and (min-device-width: 375px)
and (min-device-height: 812px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
/* styles */
}
/* 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 */
}
@moonbyt3
Copy link

awesome, working, tested on browserstack, thanks hoyangtsai

@naveenlb-epsilon
Copy link

This media query is also affecting the Samsung S8/S9 version mobiles. Not working as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment