5

さまざまな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; }
4

3 に答える 3

4

ビューポートの幅がデバイス幅に設定されているため、iPad3の画面解像度は1024x768として報告されますが、デバイスのピクセル比は2になります。

于 2012-05-04T20:47:38.883 に答える
0

Robbo、あなたのコードは使用しています：-webkit-min-device-pixel-ratio:0これは無効なステートメントです。非網膜デバイスのピクセル比は1です。これが、iPad3が両方のスタイルシートを採用する理由である可能性があります。

于 2013-01-18T08:26:41.617 に答える
0

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およびiPad2と比較してピクセル比が異なります。

于 2012-09-25T07:45:25.130 に答える