9

開発中の Web サイトをテストしており、メディア クエリを使用しています。

ブラウザでページをテストしてサイズを変更すると、すべて問題ありません。

しかし、モバイル デバイスでテストすると、電話の向きを変えると問題が発生します。

モードでページを読み込むlandscapeと、正しい CSS が適用されます。

に変更するportraitと、CSSも正しいです。

しかし に戻るとlandscape、portraitcss クラスはまだ適用されています。

これらのメタタグを使用しています 

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

そして、私のメディアクエリでは

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

デバイスの幅に警告して、問題がないことを確認しました。landscapeモードでは598px幅が広く、portrait384px

Nexus 4 (Android 4.3) を使用しています。

向きを元に戻すと CSS が適用されないのはなぜですか?

編集: サイトを読み込んでportraitから に変更するlandscapeと、CSS が適用されません。最小の解像度に達すると、元に戻すことはできません。

4

5 に答える 5

4

私の問題は、CSS リクエストの順序に関連しています。

'min-device-width'私は残りの前に定義していました。

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

しかし、最後に定義すると機能します。

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

device-width の詳細については、この質問を確認してください。

于 2013-09-11T18:11:54.633 に答える
4

私のNexus 4では、次のようなものがあり、テストケースでうまくいくようです:

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

また、メディア クエリの方向については言及しません。たとえば、次のようにします。

@media only screen and (max-width: 610px) { /* Some CSS here */ }

編集: メディア クエリに関して、他の max-width の後に max-device-width を配置する必要があるようです。以下のコメントで vyx.ca を引用するには...

私の問題を見つけました。残りの前に「max-device-width」を定義する方法に注意してください。その条件を最後に置くと、うまくいきます。「max-device-width」は Retina ディスプレイに使用されます。

于 2013-09-11T17:44:16.450 に答える
3

よく知られているquiksmode サイトでは、デバイス幅/デバイス高さのメディア機能がstaticとして定義されています。

これらのメディア クエリは、いったん決定されると静的です。つまり、デバイスの向きが変更されたときに、チェック対象の値を更新しません。(したがって、縦向きで開始してから横向きに切り替えた場合、縦向きのデバイス幅は引き続きカウントされます。ページをリロードすると、これが解決されます。)

そのため、向きを変更した後でも max-device-width の使用が適用されます。

于 2014-01-27T14:33:07.077 に答える
2

このコードは私のために働いた:-

  @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
    body
    {
        background:#009;
    }
}

@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
    body
    {
        background:#993;
    }
}
于 2014-03-13T07:12:54.650 に答える
1

メディア クエリが重複しています。max-width 520 は max-width 610 にも当てはまります。また、横向きに OR があるため、max-width 610 が true の場合、Portrait でも true になる可能性があります。重複するメディア クエリは、カスケードするという点で CSS のように機能するため、奇妙な動作が発生します。

あなたのクエリには、orientation:portrait への参照が見当たりません。通常、オリエンテーション クエリを実行するときは、どちらかにする必要があります。

また、最小幅を追加して、幅の重複を削除してみてください

@media only screen and (orientation:landscape) { ... }

@media only screen and (orientation:portrait) { ... }

于 2013-09-11T17:39:11.513 に答える