Як визначити орієнтацію пристрою за допомогою медіа-запитів CSS?

У 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 */
}

але все одно схоже, що вам доведеться експериментувати

Я думаю, нам потрібно написати більш конкретний медіа-запит. Переконайтеся, що якщо ви пишете один медіа-запит, він не повинен впливати на інший вид (Mob, Tab, Desk), інакше це може виникнути проблеми. Я хотів би запропонувати написати один основний медіа-запит для відповідного пристрою, який охоплює як перегляд, так і один орієнтаційний медіа-запит, який ви можете конкретнішим кодом більше про орієнтацію переглянути його для належної практики. нам не потрібно одночасно писати обидва запити щодо орієнтації на медіа. Ви можете навести приклад нижче. Мені шкода, якщо моя англійська мова не дуже хороша. Наприклад:

Для мобільних пристроїв

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

}

Настільний

зробіть, відповідно до ваших вимог до дизайну, насолоджуйтесь ... (:

Спасибі, Джиту

Я б пішов на співвідношення сторін, це пропонує більше можливостей.

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

Як орієнтація, так і співвідношення сторін залежать від фактичного розміру вікна перегляду і не мають нічого спільного з самою орієнтацією пристрою.

Детальніше: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

У Javascript краще використовувати screen.widthі screen.height. Ці два значення доступні у всіх сучасних браузерах. Вони надають реальні розміри екрану, навіть якщо браузер був зменшений, коли програма запущена. window.innerWidthзмінюється, коли браузер зменшується, що не може відбутися на мобільних пристроях, але може статися на ПК та ноутбуках.

Значення screen.widthта screen.heightзмінюються, коли мобільний пристрій перемикається між портретним та альбомним режимами, тому можна визначити режим, порівнюючи значення. Якщоscreen.width більше 1280px, ви маєте справу з ПК або ноутбуком.

Ви можете побудувати слухач подій у Javascript, щоб виявити, коли два значення перевернуті. Значення ширини портретного екрана, на якому слід зосередитись, - 320 пікселів (переважно iPhone), 360 пікселів (більшість інших телефонів), 768 пікселів (невеликі планшети) та 800 пікселів (звичайні планшети).