I have a bunch of css media queries written for various iPhones however, the code is messed up. The iPhone load css for iPhone 10, while it is an iPhone, is 8. I think it has to do with the maximum screen size part overlapping each other. Any good solution to fix this? E.g. use extract screen sizes for the specific phones?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<style>
body{
margin:0px;
padding:0px;
background-color:green;
}
header{
height:100vh;
border-bottom:1px solid black;
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
header{
background-color:red;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
header{
background-color:blue;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6{
display:block;
}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
header{
background-color:pink;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6plus{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
header{
background-color:orange;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone6plus{
display:block;
}
}
/* ----------- iPhone X ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
header{
background-color:yellow;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone10{
display:block;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
header{
background-color:olive;
height:calc(100vh);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone10{
display:block;
}
}
</style>
</head>
<body>
<header class="iphone6">
iphone 6
</header>
<header class="iphone6plus">
iphone 6 plus
</header>
<header class="iphone10">
iphone 10
</header>
</body>
</html>
Most likely not the perfect solution but it works. I used a media query where the min-device-width and max-device-width are exactly that the device widths are, like this I could specifically target the iPhone X and adjust styles accordingly.
@media only screen
and (min-device-width: 375px)
and (max-device-width: 375px)
and (min-device-height: 812px)
and (max-device-height: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
header{
background-color:yellow;
height:calc(100vh - 57px);
}
.iphone6,
.iphone6plus,
.iphone10{
display:none;
}
.iphone10{
display:block;
}
}