JavaScriptでは、次を使用して方向モードを検出できます。
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
ただし、CSSのみを使用して方向を検出する方法はありますか?
例えば。何かのようなもの:
@media only screen and (width > height) { ... }
画面の向きを検出するCSS:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
メディアクエリのCSS定義は http://www.w3.org/TR/css3-mediaqueries/#orientation にあります。
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
しかし、まだあなたがする必要があるように見えます 実験
もっと具体的なメディアクエリを書く必要があると思います。 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
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(通常のタブレット)です。