5

iOS アプリ内のヘルプ ページに使用している埋め込み HTML ファイルを持っていますが、iPad と iPhone で異なる方法で表示される場合は、いくつかのスタイルを変更したいと考えています。私は @media 構文について学んだ束を読んだことがありますが、私の人生では、それを適切に機能させることはできません。以下に示す HTML ファイルの場合、デバイスに基づいて調整するのではなく、常に iPad スタイルの背景 (ピンク) を表示するのはなぜですか?

<head>
    <title>Help</title>

<meta name="viewport" content="width=device-width">
    <style type="text/css">
        h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;}

        /* iphone - GREEN */
        @media only screen and (max-device-width : 480px) {
            body {background-color:#009900;}
        }

        /* ipad  - PINK */
        @media only screen and (max-device-width : 1024px) {
            body {background-color:#ff8888;} 
        }
    </style>
</head>
<body>
    <br>
    <h1> I Need Some Help!</h1>
</body>
4

3 に答える 3

8

CinCSSは「カスケード」を表します。iPad のスタイルが iPhone のスタイルを上書きしています。次のように切り替えてみてください。

/* ipad  - PINK */
@media only screen and (max-device-width : 1024px) {
    body {background-color:#ff8888;} 
}

/* iphone - GREEN */
@media only screen and (max-device-width : 480px) {
    body {background-color:#009900;}
}

iPhoneのビューポートの幅は？480px?

コードでは、最初にデバイスの幅が <=480 かどうかを確認しています。これは true を返すため、囲まれたスタイルが適用されます。次に、コードはデバイスの幅が <=1024 かどうかをチェックします。480 は確かに 1024 よりも小さいため、囲まれたスタイルが適用されます。

于 2012-07-17T22:15:42.717 に答える
6

max-device-widthプロパティを単独で使用しないことをお勧めします。min-device-widthデバイスを正確にターゲットにするなど、他のプロパティと一緒に使用します。

混乱することもありますが、理解を深めるために、W3Cで指定されている基本プロパティdevice-widthは、デバイス画面の幅（ブラウザーの幅ではありません）です。

minおよびmaxは、「以上」および「以下」の制約を表す接頭辞です。この構文は、HTMLおよびXMLと競合する可能性のある「<」および「>」文字を回避するために使用されます。

つまり、device-widthデバイスの幅をクエリして1つの数値として返しますが、minとmaxを使用すると、デバイスの最小幅と最大幅を表す2つの固定数値は返されませんが、device-width選択した値よりも小さいか大きいかを確認できます。

したがって、あなたの場合、注文はiPhoneデバイスの幅が常に1024と480未満になることを意味するため、両方のセットがiPhoneに適用されます。

セットの順序を切り替えることは@JezenThomasのソリューションとして機能しますが、次のハードボイルドCSSメディアクエリを試すことをお勧めします。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2012-07-17T22:11:39.357 に答える
1

次の行に沿って何かを試すことができます。

@media only screen and (min-device-width:481px) and (max-device-width : 1024px) {
        body {background-color:#ff8888;
}
于 2012-07-17T23:17:52.287 に答える