web-dev-qa-db-ja.com

CSSメディアクエリを使用してデバイスの向きを検出する方法

JavaScriptでは、次を使用して方向モードを検出できます。

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

ただし、CSSのみを使用して方向を検出する方法はありますか？

例えば。何かのようなもの：

@media only screen and (width > height) { ... }
cssbrowsercss3tabletmedia-queries
134
Francesco

画面の向きを検出するCSS：

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

メディアクエリのCSS定義は http://www.w3.org/TR/css3-mediaqueries/#orientation にあります。

376
Richard Schneider
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

しかし、まだあなたがする必要があるように見えます 実験

32
mistagrooves

もっと具体的なメディアクエリを書く必要があると思います。 1つのメディアクエリを記述した場合、他のビュー（Mob、Tab、Desk）に影響しないことを確認してください。そうしないと、問題が発生する可能性があります。ビューと1つのオリエンテーションメディアクエリの両方をカバーするデバイスごとに1つの基本的なメディアクエリを作成して、オリエンテーションビューに関するコードを特定できるようにすることをお勧めします。両方のメディア指向クエリを同時に記述する必要はありません。以下の例を参照できます。私の英語の文章があまり良くない場合は申し訳ありません。例：

モバイルの場合

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

タブレットの場合

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

デスクトップ

設計要件に従ってお楽しみください...（：

ありがとう、Jitu

13
jitu

Javascriptでは、screen.widthおよびscreen.heightを使用することをお勧めします。これらの2つの値は、最新のすべてのブラウザーで使用できます。アプリの起動時にブラウザが縮小された場合でも、画面の実際のサイズが表示されます。ブラウザが縮小されると、window.innerWidthは変わります。これは、モバイルデバイスでは発生しませんが、PCやラップトップでは発生する可能性があります。

screen.widthとscreen.heightの値は、モバイルデバイスがポートレートモードとランドスケープモードを切り替えると変化するため、値を比較してモードを決定することができます。 screen.widthが1280pxより大きい場合は、PCまたはラップトップを使用しています。

Javascriptでイベントリスナーを作成して、2つの値が反転したことを検出できます。集中するポートレートscreen.widthの値は、320px（主にiPhone）、360px（ほとんどの他の電話）、768px（小さなタブレット）、800px（通常のタブレット）です。

0
BlackMagic