Почему когда переворачиваешь экран, сайт показывает планшетную версию, а не мобильную?

Question

[YbeysaHelp]

Заказчик жалуется, что когда он переворачивает экран отображается планшетная версия. У меня мобильная версия прописана с 540px. Как сделать чтобы на телефоне всегда отображалось мобильная?

Comments

[Rustam Bainazarov]

• либо JS городить (ХЗ что)
  
• либо прописывать к @media-запросам ещё и максимальную высоту, запрос ориентации тут не особо поможет, кстати
  
• либо увеличить 540 пикселей до какого-то значения (iPhone X, к примеру, очень широкие в альбомом режиме, так что это не панацея)
  
• либо смириться
  

Вообще, это нормально так-то на самом деле.

[YbeysaHelp]

Решение:

@media (max-width: 1000px) and (orientation: landscape){
         /*Стили для Перевернутого экрана*/
}
@media (max-width: 539px) and (orientation: portrait){
/*Стили для мобилки*/
}

Answer 1

[Евгений Соломеин]

Прописывай медиазапросы в зависимости не только от ширины, но и от ориентации :)

https://developer.mozilla.org/ru/docs/Web/CSS/@media
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Answer 2

[YbeysaHelp]

Решение:

@media (max-width: 1000px) and (orientation: landscape){
         /*Стили для Перевернутого экрана*/
}
@media (max-width: 539px) and (orientation: portrait){
        /*Стили для мобилки*/
}

Comments

[strelok011]

Не забывайте о медиа запросе с указан ем типа устройства (handheld например)
https://vanseodesign.com/css/media-queries/