iPhone 6 & 6+ Media Queries Not Working

HTML & CSS
1

Hi Everyone,

It seems my iphone 6s & iphone 6+ want to share media queries even thought I would like them to be different.

Can anyone tell me why the iphone 6+ is adopting the 6s media parameters? I have done some research and it seems like I am using the correct media queries. Any help would be appreciated.

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {

.upcomingbanner {padding-bottom: 20%; }
.upcoming {background-color: #39C; height: 10%; display: block;  right:0; left:0; position:absolute; z-index:1; }
.upcomtxt {text-align:center; }

.upcomingcol1 {width: 100%; }
.upcomingcol2 {width: 100%; margin-left:1%; margin-right: 1%; }
.upcomboxheader { width: 100%;}
.upcomlist {margin-left: 5px; }

}
  
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

.upcomingbanner {padding-bottom: 40%; }
.upcoming {background-color: #000; height: 20%; display: block;  right:0; left:0; position:absolute; z-index:1; }  
.upcomtxt {text-align:center; }

.upcomingcol1 {width: 100%; }
.upcomingcol2 {width: 100%; margin-left:1%; margin-right: 1%; }
.upcomboxheader { width: 100%;}
.upcomlist {margin-left: 5px; }

}
2

How do your CSS media queries differentiate between the devices? (Think about it before you answer.)

Do you realize that trying to write code for specific devices is an exercise in futility? Threre are just too, too many and more coming out every year.

2 Likes
3

If you didn’t want to provide a constructive response just skip over the persons question. This board is to help people not criticize them. I hope you never need help in the future.

4

This is help.
It is widely accepted that targeting specific devices with queries is a flawed approach.
Use queries according to the needs of your specific design, not for the ever increasing multitude of devices on the market.
Anyone who tells you otherwise is misleading you.

1 Like
5

Do you have the viewport meta tag in the head section of your HTML page?
<meta name="viewport" content="width=device-width, initial-scale=1">

Reference info regarding media queries for specific devices:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

My remark about coding for specific devices is common knowledge… “exercise in futility”.

6

If your device query has a minimum pixel density of 2 then that means a pixel density of 3 is also targeted because the minimum was 2. Vice versa isn’t true (min-device-pixel-ratio:3) and a device with a pixel density of 2 won’t read the rules for the one with a density of 3 in the way that your rules are set up.

If you set a maximum pixel density for the one with a density of 2 then that will not be picked up in the next query. i.e. each will be separately applied.

Run the following code which you can test in devtools using the toggle device toolbar.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.model{display:none}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-max-device-pixel-ratio: 2) { 
 	.iphone6{display:block} 
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {
	.iphone6plus{display:block}
}
  


</style>

</head>

<body>
<div class="model iphone6">Iphone 6 and 6S</div>
<div class="model iphone6plus">Iphone 6plus and 6s Plus</div>
</body>
</html>

Specifically -webkit-min-device-pixel-ratio: 3 and -webkit-max-device-pixel-ratio: 2.

Of course you have now excluded all versions of the iphone below version 6 and also the newer se version which is the same screen size as the iphone4.

This is why it is futile to follow this approach as others have already mentioned and unless you are trying to squash a known bug then you should dispense with device specific media queries altogether. Use max-width/height or min-width/height media queries based on the metrics of the design in hand and you will cater for all devices now and in the future with much simpler and standard code.

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.