2012-05-04 11 views
5

さまざまなiOSデバイス(iPad3、iPad2、iPhone4、iPhone3)を対象にして、次のメディアクエリを設定しました。このページをiPhone3とiPad2で読み込むと、正しいdivが表示されます。ただし、このページをiPad3で読み込むと、iPad2とiPhone4のスタイルが読み込まれますが、iPad3では読み込まれません。 (現時点でiPhone4をテストすることはできません。)iOSデバイスでのCSSメディアクエリの問題

<!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ファイルである)に応じてコード化されている..and:

#ipad3 { background-color: red; } 
+1

なぜこの質問を削除するだけでしたか? – BoltClock

+0

私はこの問題をはっきりと明確にし、人々が自分自身を試してみるための簡単な例を提供しました。 –

答えて

4

あなたは、デバイスの幅に設定し、ビューポートの幅を持っているので、 iPad3の画面解像度は1024×768依然として報告されますが、デバイス・ピクセル比は2

+0

ありがとう、それは私を近づけます。 iPad3のメディアクエリを1024x768に設定すると、iPad3.cssファイルとiPad2.cssファイルの両方が取得されます。 -webkit-min-device-pixel-ratio設定を無視しているようです。 iPhone4と同じです(iPad2とiPhone3はうまく動作します)。何か案は? –

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およびiPad 2に比べてピクセル比率が変化します。

0

Robbo、あなたのコードは無効なステートメントです:-webkit-min-device-pixel-ratio:0非網膜デバイスのピクセル比率は1になります。これはおそらく、iPad 3が両方のスタイルシートを取得する理由です。

関連する問題