16

次のような信頼できるメディア クエリ ルールを探しています。

If desktop width < 720px AND devices in portrait mode {}

(つまり、デスクトップで幅が狭くなると、メディア クエリは 720px で開始されます。携帯電話では、これはポートレート モードの場合にのみ発生します。ランドスケープにはメディア クエリを適用しないでください)。

問題は、デスクトップとは別にデバイスをターゲットにする方法です。

問題が存在する理由:@media handheldはサポートされていません

追加max-widthで全てに影響するので併用不可max-device-width AND portrait

次のいずれかしかターゲットにできないようです。

  1. 以下のすべてのデバイス/設定された幅の間
  2. デバイスのみ (JavaScript shim を使用してメディア クエリを修正) ベロー/設定された幅と向きの間。

デバイスとデスクトップを別々に扱うことはできません。

私のニーズを満たす既存の JavaScript ソリューションはありますか?

CSS を LESS でコーディングしていることに注意してください。メディア クエリはネストされています。

バックグラウンド

私が取り組んでいるサイトはレスポンシブで、グリッド システムを使用しています。720px 幅 (現在のテスト幅) では、小さいデバイス/解像度の列の使用方法が変更されます。ただし、テストしたところ、サイト (幅 720 ピクセルのフル サイト) は、私の小さな画面の HTC Desire でも、横向きで快適に読むことができました。メディア クエリでの使いやすさを向上させるためにサイトの一部を削除しているので、通常はランドスケープでアクセスできるようにしない方がよいと考えました。

要素の列スパンを変更せずにデスクトップで 720px を超えると、サイトがかなり押しつぶされて表示されます。ただし、モバイル デバイスの小さい性質のため、そうは見えません。ただし、列スパンの変更により、特定の要素 (見出しなど) は、携帯電話の横長になると単純に不均衡になります (ブラウザーの高さが大幅に縮小されるため)。

簡単に言えば、私が他のサイトで達成したように、純粋にブラウザーの幅だけでデザインを変更しても、すべてのデバイスに同じように反映されるわけではありません。

次のメタ タグを使用しています。

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

試したこと

デスクトップでは向きは関係ありません。ユーザーウィンドウの設定、解像度などにより変化します。

電話/両方をターゲットにするために、次のことを試しました。

@media handheld and (orientation:portrait) { }

この属性を利用しているように見える電話はありませんhandheld。少なくとも 100% は利用していないため、価値がありません。

@media screen and (max-device-width:720px) and (orientation:portrait)  { }

うまく機能しますが、android 2.2 および 2.3 (他の OS は言うまでもなく、他の可能性もありますか?) には、機能しmax-device-widthないという問題があります。

@media screen and (max-width:720px) and (orientation:portrait)  { }

高解像度モニター (ウィンドウの幅を狭くすると、高さが急速に > 幅になるため) と電話で動作しますが、ウィンドウが 720px 幅で縦向きにならないため、小さなモニターでは動作しません (サイトは私が望む制限を超えて凝縮し続けます)。

@media screen and (max-width:720px), screen and (orientation:portrait)  { }

何が何でも最初にやります。役に立たない。

@media screen and (max-width:720px), screen and (max-width:500px) and (orientation:portrait) { }

と

@media screen and (max-width:720px) { }
@media screen and (max-width:500px) and (orientation:portrait)  { }

すべてが単純に大きい方を使用しmax-widthます。

私もmin/max-height成功せずにいじりました。

4

5 に答える 5

5

MDN (Mozilla Developer Network) によると、こちらのドキュメントとこちらのwindow.innerHeightドキュメントを使用して、ブラウザの幅と高さをピクセル単位で測定して向きを決定するのが最善の方法だと思います。window.innerWidth

//Detect mobile platform

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if ( isMobile.any() ) {

    if (window.innerHeight > window.innerWidth) {
       console.log("Orientation is in portrait");
       }
    else {
       console.log("Orientation is in landscape");
         }
    }
else {
   console.log("Mobile platform not detected.");
};

モバイルプラットフォームに関するその他のドキュメントはこちらです。

于 2012-12-12T01:55:36.627 に答える
1

完全を期すために、ネストされた LESS のコンテキストでメディア クエリの使用を制限するために CSS セレクターを使用する方法を説明します。

@enginefree の回答と次のコメントでは、モバイル デバイスを確認する方法、その向き、および結果に基づいて要素の属性を操作する方法について説明しました。

次のコードは、探している属性またはクラスが検出されない場合に、LESS&および CSS3セレクターを使用してメディア クエリを表示する方法を示しています。:not

body {
    /* this has the possible class or data attribute of 'mobile' */
    /* this is not included in the nest as you can't climb at will */
    /* the class or attribute (via our JavaScript) could be applied
       to any element that sits above and outside of `#level-1` in 
       this example */

}


#level-1 { 

    #level-2 {

        #level-3 {

            #level-4 {

                body:not(.mobile) & {

                    /* produces the following CSS */
                    /* body:not(.mobile) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile class */

                    @media screen and (max-width:) {

                    }
                }

                body:not([data-device=mobile]) & {

                    /* produces the following CSS */
                    /* body:not([data-device="mobile"]) #level-1 #level-2 #level-3 #level-4 { } */
                    /* rules in this block will only be executed if body does not have a mobile data-device attribute */

                    @media screen and (max-width:) {

                    }
                }

            }

        }

    }

}

要素がこのネストの一部である場合、body最終的に次の CSS になります。これにより、要素がネストの範囲外およびその上に存在しなければならない理由が説明されます。

body:not(.mobile) body #level-1 #level-2 #level-3 #level-4 { }

&オペレーターについてもっと読む

于 2012-12-18T18:54:10.947 に答える
1

これら 3 つのルールは、ほとんどのモバイル デバイスに適用されます。

@media only screen and (min-width: 768px) and (max-width: 959px) @media only screen and (min-width: 480px) and (max-width: 767px) @media only screen and (max-width: 479px)

または、Skeleton Responsive フレームワークを使用してみてください

于 2012-11-17T15:10:51.973 に答える
1

Modernizrを調べる必要があります。これには、事実上すべての有用な最新のブラウザー機能の機能検出/推論が含まれます。特に、デバイスが単純なブール値チェックによるタッチベースであるかどうかが含まれModernizr.touchます。そこから、次のように、document.width と document.height を比較することで、縦横のテストを回避できる場合があります。

if(Modernizr.touch) {
    // is touch device

    if(document.height > document.width) {
        // is in portrait
    } else {
        // is in landscape
    }
} else {
    // not touch device
}

お気づきのように、タッチ/デスクトップ用の完全なテストはありません。そのため、Modernizr タッチ テストを組み込む (または独自にロールする) 場合は、どのタッチ テストが信頼できるかを説明するこのページを参照することをお勧めします。いつ。

于 2012-12-12T01:41:38.440 に答える
0

優れた JavaScript ライブラリはcss3-mediaqueries-jsです。

于 2012-12-11T11:38:16.630 に答える