Bagaimana cara mendeteksi orientasi perangkat menggunakan kueri media CSS?

Dalam JavaScript mode orientasi dapat dideteksi menggunakan:

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

Namun, apakah ada cara untuk mendeteksi orientasi menggunakan CSS saja?

Misalnya. sesuatu seperti:

@media only screen and (width > height) { ... }

CSS untuk mendeteksi orientasi layar:

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

Definisi CSS dari kueri media ada di 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 */
}

tetapi sepertinya Anda masih harus bereksperimen

Saya pikir kita perlu menulis kueri media yang lebih spesifik. Pastikan jika Anda menulis satu permintaan media, itu tidak akan berpengaruh pada tampilan lain (Mob, Tab, Desk) jika tidak, ini bisa menjadi masalah. Saya ingin menyarankan untuk menulis satu permintaan media dasar untuk masing-masing perangkat yang mencakup kedua tampilan dan satu permintaan media orientasi yang Anda dapat spesifik kode lebih lanjut tentang tampilan orientasi untuk praktik yang baik. kami tidak perlu menulis kedua kueri orientasi media secara bersamaan. Anda dapat merujuk contoh saya di bawah ini. Saya minta maaf jika tulisan bahasa Inggris saya kurang bagus. Ex:

Untuk Ponsel

@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.

}

Untuk Tablet

@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.

}

Desktop

buat sesuai kebutuhan desain Anda nikmati ... (:

Terima kasih, Jitu

Saya akan memilih rasio aspek, ia menawarkan lebih banyak kemungkinan.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Baik orientasi dan rasio aspek tergantung pada ukuran aktual dari viewport dan tidak ada hubungannya dengan orientasi perangkat itu sendiri.

Baca lebih lanjut: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

Dalam Javascript lebih baik menggunakan screen.widthdan screen.height. Kedua nilai ini tersedia di semua browser modern. Mereka memberikan dimensi nyata dari layar, bahkan jika browser telah diperkecil ketika aplikasi menyala. window.innerWidthberubah ketika peramban diperkecil, yang tidak dapat terjadi pada perangkat seluler tetapi dapat terjadi pada PC dan laptop.

Nilai screen.widthdan screen.heightberubah saat perangkat bergerak antara mode potret dan lanskap, sehingga dimungkinkan untuk menentukan mode dengan membandingkan nilai. Jika screen.widthlebih besar dari 1280px Anda berurusan dengan PC atau laptop.

Anda bisa membuat pendengar acara dalam Javascript untuk mendeteksi kapan kedua nilai dibalik. Nilai portrait screen.width untuk berkonsentrasi adalah 320px (terutama iPhone), 360px (sebagian besar ponsel lain), 768px (tablet kecil) dan 800px (tablet biasa).