1

Есть у меня лендинг и он использует что-то по типу fullpage. При работе с адаптивностью возникла одна проблема, мне нужно, чтобы при расширении 1024x1366(iPad Pro) применялись уже более мобильные стили (это я сделал):

@media screen and (max-width: 1024px)

Но мне также нужно, чтобы при расширении устройства 1024x768(это ноутбук) эти стили не работали, как можно модифицировать этот запрос под эту ситуацию? Пробовал так:

@media screen and (max-width: 1024px) and not (device-height: 768px)

Но он почему-то теперь не работает на iPad Pro.

5
  • 1
    почитайте что такое user agent 1 мая 2020 в 9:47
  • @MaximLensky, я в общем понимаю, что такое user-agent, но не особо понимаю, как его можно использовать в media запросах
    – YavDen
    1 мая 2020 в 9:53
  • qna.habr.com/q/277777 вот посмотрите 1 мая 2020 в 10:26
  • Так это решение на JS, меня больше интересует можно ли реализовать все это на чистом CSS
    – YavDen
    1 мая 2020 в 10:46
  • на css? на врядли 1 мая 2020 в 11:04

2 ответа 2

3

Для iPad - @media screen and (max-width: 1024px) and (orientation: portrait).

Можно так же попробовать aspect-ratio.

2
@media screen and (max-width: 1024px) and (min-height: 1366px)

А ещё можно одновременно указать min и max.

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

1
  • Очень много элементов, которые просто лишнее на мобильном устройстве (даже для iPad)
    – YavDen
    1 мая 2020 в 14:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.