CODEWITHSUNDEEP
ioscssmedia-queries
Rob Lauer
Rob Lauer

Reputation: 3171

CSS media queries issue with iOS devices

I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can't test the iPhone4 at the moment.) Any ideas?

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>

<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>

ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>

..and the 4 css files are coded accordingly (this example is the iPad3.css file):

#ipad3 { background-color: red; }

Upvotes: 5

Views: 4175

Answers (3)

Martin
Martin

Reputation: 121

Robbo, your code is using: -webkit-min-device-pixel-ratio:0 which is an invalid statement. The non-retina devices will have a pixel ration of 1. That's probably why the iPad 3 picks up both stylesheets.

Upvotes: 0

Erik Tjernlund
Erik Tjernlund

Reputation: 1983

To target the iPad 3 you can use:

<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" />

The pixel dimensions are the same, but the pixel-ratio changes compared to the original iPad and the iPad 2.

Upvotes: 0

Jon Friskics
Jon Friskics

Reputation: 282

Because you have the width of the viewport set to device-width, the iPad3 screen resolution will still get reported as 1024x768, but the device-pixel-ratio will be 2.

Upvotes: 4

Related Questions