9

これをどうしたらいいのか本当にわかりません.Galaxy Tab 2、7インチのタブレットを持っていて、Android 4.1.1でブラウザ（v26.0.1410.58）としてクロムを使用しています. Web アプリをポートレート モードで読み込んでいますが、メディア クエリは問題なく一致します。ランドスケープ モードに切り替えると、すべて正常に動作しますが、ポートレート モードに戻すと、ブラウザーはスタイルを適用しません。タブレット USB を PC に接続してアプリをデバッグすると、chrome がメディア クエリとの一致を見つけられなくなったことがわかります。

私が適用しているメディアクエリは次のとおりです。

(device-width: 600px) および (max-device-height: 1024px) および (max-width: 600px) および (min-device-height: 976px) および (orientation: Portrait)

これが発生する前後にブラウザでデバイスの幅と高さを確認しても、まったく変化しません。

役に立つかもしれないいくつかのデータ:

画面の幅: 600

スクリーンの高さ: 976

$(ウィンドウ).幅(): 600

このデバイスでのみ発生しており、このタブでアプリをサポートする必要があります。

4

3 に答える 3

1

オリエンテーション メディア クエリは、サポートするのが本当に苦痛です...私はそれらに近づかないことをお勧めします。私が使用する非常に優れたメディア クエリのセットがあります。Zurb の Foundation メディア クエリをリバース エンジニアリングしました。下記参照...

// Small screens
@media only screen { }
/* Define mobile styles */

@media only screen and (max-width: 40em) { }
/* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { }
/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { }
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { }
/* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { }
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { }
/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { }
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { }
/* min-width 1921px, xxlarge screens */
于 2014-08-05T23:45:40.930 に答える
0

試してみてください

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */}
/* styles apply only in portrait mode */

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */}
/* styles apply only in landscape mode */

デバイスの範囲内でのみ動作するスタイルが必要な場合... Obs:スタイルを 2 つのうちの 1 つに適用する場合にのみ、方向ビットを記述します。

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

宣言した他の値を削除すると、高さが原因で競合が発生します。

于 2015-02-27T04:10:24.373 に答える