Jak wykryć orientację urządzenia za pomocą zapytań o media CSS?

W JavaScript tryb orientacji można wykryć za pomocą:

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

Czy istnieje jednak sposób na wykrycie orientacji za pomocą tylko CSS?

Na przykład. coś jak:

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

CSS do wykrywania orientacji ekranu:

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

Definicja CSS zapytania o media znajduje się pod adresem 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 */
}

ale nadal wygląda na to, że musisz eksperymentować

Myślę, że musimy napisać bardziej szczegółowe zapytanie o media. Upewnij się, że jeśli napiszesz jedno zapytanie o media, nie powinno to mieć wpływu na inne widoki (Mob, Tab, Desk), w przeciwnym razie może to być problem. Chciałbym zasugerować napisanie jednego podstawowego zapytania o media dla odpowiedniego urządzenia, które obejmuje zarówno widok, jak i jedno zapytanie dotyczące orientacji, aby można było bardziej szczegółowo określić kod dotyczący widoku orientacji, co jest dobrą praktyką. nie musimy pisać jednocześnie zapytań dotyczących orientacji mediów. Możesz odnieść się do mojego poniższego przykładu. Przepraszam, jeśli mój angielski nie jest zbyt dobry. Dawny:

Dla telefonów komórkowych

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

}

Do tabletu

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

}

Pulpit

spraw, aby zgodnie z wymaganiami projektowymi cieszyć się ... (:

Dzięki, Jitu

Wybrałbym proporcje, oferuje znacznie więcej możliwości.

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

Zarówno orientacja, jak i proporcje zależą od rzeczywistego rozmiaru widocznego obszaru i nie mają nic do zrobienia z samą orientacją urządzenia.

Czytaj więcej: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

W Javascript lepiej jest używać screen.widthi screen.height. Te dwie wartości są dostępne we wszystkich nowoczesnych przeglądarkach. Podają rzeczywiste wymiary ekranu, nawet jeśli przeglądarka została zmniejszona po uruchomieniu aplikacji. window.innerWidthzmienia się, gdy przeglądarka jest zmniejszana, co nie może mieć miejsca na urządzeniach mobilnych, ale może się zdarzyć na komputerach PC i laptopach.

Wartości screen.widthi screen.heightzmieniają się, gdy urządzenie mobilne przełącza się między trybem pionowym i poziomym, więc można określić tryb, porównując wartości. Jeśli screen.widthjest większy niż 1280px, masz do czynienia z komputerem PC lub laptopem.

Możesz skonstruować detektor zdarzeń w JavaScript, aby wykrywać, kiedy te dwie wartości są odwracane. Wartości szerokości ekranu pionowego, na których należy się skoncentrować, to 320 pikseli (głównie iPhone), 360 pikseli (większość innych telefonów), 768 pikseli (małe tablety) i 800 pikseli (zwykłe tablety).