@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.
Looking for a specific orientation ?
Portrait
Add the following rule:
and (orientation : portrait)
Landscape
Add the following rule:
and (orientation : landscape)
References: