Question

我设置了以下媒体查询以定位各种iOS设备（iPad3，iPad2，iPhone4，iPhone3）。当我用iPhone3和iPad2加载这个页面时，正确的div被着色。当我用iPad3加载这个页面时，iPad2和iPhone4样式被加载，但不是iPad3。（目前无法测试iPhone4。）有什么想法吗？

<!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>

..并且相应地编码了4个css文件（这个例子是iPad3.css文件）：

#ipad3 { background-color: red; }

Answer 1

由于视口宽度设置为设备宽度，因此iPad 3屏幕分辨率仍会报告为1024x768，但设备像素比率为2。

Answer 2

要定位iPad 3，您可以使用：

<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" />

像素尺寸相同，但与原始iPad和iPad 2相比，像素比率发生了变化。

Answer 3

Robbo，您的代码正在使用：-webkit-min-device-pixel-ratio:0这是一个无效的语句。非视网膜设备的像素比率为1.这可能就是iPad 3选择两种样式表的原因。

iOS媒体查询问题与iOS设备有关

3 个答案: