CSS ortam sorgularını kullanarak cihaz yönünü nasıl tespit edebilirim?

JavaScript'te yönlendirme modu aşağıdakiler kullanılarak algılanabilir:

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

Ancak, yönlendirmeyi yalnızca CSS kullanarak tespit etmenin bir yolu var mı?

Örneğin. gibi bir şey:

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

Ekran yönünü algılamak için CSS:

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

Bir medya sorgusunun CSS tanımı http://www.w3.org/TR/css3-mediaqueries/#orientation adresindedir.

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

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

ama hala denemeniz gerekiyor gibi görünüyor

Daha spesifik bir medya sorgusu yazmamız gerektiğini düşünüyorum. Bir medya sorgusu yazdığınızda, diğer görünüme (Mob, Sekme, Masa) etki etmemesi gerektiğinden emin olun, aksi takdirde sorun olabilir. Ben hem görünüm hem de yönlendirme görünümü hakkında daha fazla özel kod olabilir bir yönlendirme medya sorgusu kapsayan ilgili cihaz için bir temel medya sorgusu yazmak öneririz onun iyi uygulama için. her iki ortam yönlendirmesi sorgusunu aynı anda yazmamız gerekmez. Aşağıdaki örneğime başvurabilirsiniz. İngilizce yazım çok iyi değilse özür dilerim. Ör:

Mobil cihazlar için

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

}

Tablet için

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

}

Masaüstü

tasarım gereksinimi göre yapmak zevk ... (:

Teşekkürler, Jitu

En-boy oranına gidecektim, daha fazla olasılık sunuyor.

/* 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) {
    ...
}

Hem yönelim hem de en boy oranı, görünüm penceresinin gerçek boyutuna bağlıdır ve aygıt yönünün kendisiyle hiçbir ilgisi yoktur.

Daha fazla bilgi için: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

JavaScript yılında kullanmak daha iyidir screen.widthve screen.height. Bu iki değer tüm modern tarayıcılarda bulunur. Uygulama açıldığında tarayıcı küçültülmüş olsa bile ekranın gerçek boyutlarını verir. window.innerWidthtarayıcı küçültüldüğünde değişir; bu, mobil cihazlarda gerçekleşemez ancak PC'lerde ve dizüstü bilgisayarlarda olabilir.

Mobil cihaz dikey ve yatay modlar arasında değiştiğinde değerleri değişir screen.widthve screen.heightdeğişir, bu nedenle değerleri karşılaştırarak modu belirlemek mümkündür. Eğer screen.widthdaha büyük 1280px olduğu bir PC ya da dizüstü bilgisayar ile uğraşıyoruz.

İki değerin ne zaman çevrildiğini algılamak için Javascript'te bir olay dinleyicisi oluşturabilirsiniz. Dikey ekran. Konsantre olacak genişlik değerleri 320 piksel (esas olarak iPhone'lar), 360 piksel (diğer çoğu telefon), 768 piksel (küçük tabletler) ve 800 pikseldir (normal tabletler).