max-width и медиа-запрос (direction: landscape) не работают в реальных телефонах - PullRequest
1 голос
/ 15 мая 2019

У меня путаница.Я видел на многих сайтах, что использование max-device-width устарело, и вместо этого мне нужно использовать max-width.Поэтому мне нужно скрыть баннер в ландшафтном режиме, и вот как я это сделал:

/*landscape*/
@media screen
and (max-width: 1024px) and (orientation:landscape)
{
    .hide-row-on-landscape {
        display:none !important;
    }
}

На инструменте dev в chrome он работает как шарм, но когда я тестирую его в реальном iphone, я не вижуэто работает.Поэтому я решил использовать следующее:

/*landscape*/
@media screen
and (max-width: 1024px) and (orientation:landscape),
(max-device-width: 1024px) and (orientation:landscape)
{
    .hide-row-on-landscape {
        display:none !important;
    }
}

, и это сработало.Теперь я запутался, если max-device-width устарела и не должна использоваться, почему max-width не работает в этом сценарии?Кроме того, каково лучшее решение для того, что я пытаюсь сделать?

** Обновление

Я знаю, что есть много ответов, поддерживающих max-width без устройства, но ни один из них не объясняет, почему maxширина не поддерживает ориентацию.Так что ни один из них не отвечает моему сценарию: мне нужно использовать (Ориентация: Пейзаж), и кажется, что когда дело доходит до этого свойства, max-width не справляется с этим

1 Ответ

0 голосов
/ 15 мая 2019

Привет Вы можете просто использовать только это:

@media only screen and (max-width : 1280px) {

}

, оно будет работать на всех мобильных устройствах + вкладки + браузеры (старые, новые).зачем вам это (ориентация: пейзаж)?

...