0

ビューポートのメタは次のとおりです。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

これは私のcssです：

/* ---------- */
/* iPad 3     */
/* ---------- */

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: landscape) {

    body { background: red; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {

    body { background: orange; }
}

/* ------------ */
/* iPhone 4     */
/* ------------ */


@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: landscape) {

    body { background: blue; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 640px) and (max-device-width: 960px) and (orientation: portrait) {

    body { background: gray; }
}

iPad3 の css が iPhone4 の css を上書きするのはなぜですか?

4

2 に答える 2

1

これらのクエリ以外に CSS はありますか?

あなたの問題は、iPhone クエリにはあるmin-device-width:640pxが、iPhone (4 でも) は 320px 幅 [スケール 2 で、640 ポイントの使用可能なスペースが得られる] であるため、これらのクエリは適用されていないことです (ただし、iPad のクエリも適用されません)。クエリの外に追加の CSS があるかどうかを尋ねている理由です)

于 2012-08-02T13:58:52.437 に答える
0

デバイス固有の css の順序を変更してみてください (たとえば、iPhone css を iPad css の上に置きます)。それがあなたの問題を解決するとは思いません。しかし、私はこれを HTML5 ボイラープレート テンプレートで見ました。どこかで読んだことがありますが、小さなデバイス用の CSS コードを常に最初に記述する必要があります。

于 2012-06-02T10:52:15.220 に答える