iOS 设备的 CSS 媒体查询问题答案

【问题标题】：CSS media queries issue with iOS devicesiOS 设备的 CSS 媒体查询问题
【发布时间】：2012-05-14 09:54:13
【问题描述】：

我设置了以下媒体查询以针对各种 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; }

【问题讨论】：

你为什么删除这个问题只是为了再问一遍？
我明确地澄清了这个问题，并为人们提供了一个简单的例子来尝试自己 - 比仅仅编辑原件更好。

标签： ios css media-queries

【解决方案1】：

因为您将视口的宽度设置为 device-width，所以 iPad3 的屏幕分辨率仍会报告为 1024x768，但 device-pixel-ratio 将为 2。

【讨论】：

谢谢，这让我更接近了。如果我将 iPad3 媒体查询设置为 1024x768，它将同时获取 iPad3.css 和 iPad2.css 文件。它似乎忽略了 -webkit-min-device-pixel-ratio 设置。 iPhone4 也一样（iPad2 和 iPhone3 工作正常）。有什么想法吗？

【解决方案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 相比，像素比例发生了变化。

【讨论】：

【解决方案3】：

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

【讨论】：