Как отладить @media?

Question

[Legal Adviser]

Всем привет.
Подгоняю css под @media и столкнулся с такой проблемой, если в браузере в режиме отладки при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT)) на win10 и на iPad Pro 10,5″ (2224×1668 пикселей, 264 пикселя на дюйм) некорректно отображается сайт. Имею ввиду, что в браузере норм, а на яблоке то там поехало, то тут...
Нужен совет:
Как быстро сделать подгонку к устройствам?
P.S. "я не профи, любитель, но кое-что понимаю..."

Comments

[Dima Polos]

Safari все больше напоминает IE, так что скорее всего не в media дело, а в правилах и значениях, которые применяли, может Safari как-то некорректно с ними работает.

[Legal Adviser]

Dima Polos, да дело не в сафари. На монике фулхд подгоняю в хроме (Яхром / Gхром и других - отображается как задумано), а вот на яблоке в сафари и других браузерах всё плывёт...

[Андрей Федоров]

Вы уверены, что это не проблема кроссбраузерности?

[Legal Adviser]

Андрей Федоров, уверен, ранее писал про это со скринами. Но ранее было наоборот - на компе видно было иначе чем на планшете. Теперь же в обратном варианте ))) Как такое и из-за чего я не понимаю....

[Ankhena]

Начните с выяснения размера вьюпорта вашего девайса, потому что он вовсе не 2224×1668 Откройте и убедитесь: https://www.esolutions.se/en/test

А дальше по мере поступления проблем.

[Legal Adviser]

Ankhena, whatismyviewport.com - этим мерил...

он вовсе не 2224×1668

- в курсе. Поэтому писал:

при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT))

[Андрей Федоров]

Legal Adviser, размер скроллбара на мобильных 0px. Это может иметь значение.

[Ankhena]

Legal Adviser, ну хорошо, пусть "этим". Сколько намерили? Убедились, что не 2224?

[Legal Adviser]

Ankhena,

при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT))

[Ankhena]

Legal Adviser, Не нужно использовать min-device-width, используйте min-width и/или max-width.
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Старайтесь писать media условия в одну сторону. Желательно используя mobile-first подход. Т.е. основные стили - мобильные и дальше вы их переопределяете для планшетов и десктопов.

[Legal Adviser]

Ankhena,

Старайтесь писать media условия в одну сторону.

Вроде так и стараюсь... Я пытаюсь понять как быстрее сделать подгонку именно с яблоком, ведь вроде как везде норм, а у яблока косяки лезут..

[Legal Adviser]

Ankhena, Сейчас у меня вот так:

@media only screen and (orientation : portrait) and (min-device-width : 360px) and (max-device-width : 380px){}
@media only screen and (orientation : portrait) and (min-device-width : 320px) and (max-device-width : 360px){}
@media only screen and (orientation : portrait) and (min-device-width : 300px) and (max-device-width : 320px){}
@media only screen and (orientation : portrait) and (min-device-width : 768px) and (max-device-width : 1024px){}
@media only screen  and (orientation : landscape) and (min-device-width : 768px) and (max-device-width : 1024px){}
@media only screen and (min-width : 800px) and (max-width : 1200px){}

Или это не верно?
Но в браузере вижу изменения на компе и на планшете, т.к. первое цепляется:

@media only screen and (min-width : 800px) and (max-width : 1200px){}

И только после него идёт:

@media only screen  and (orientation : landscape) and (min-device-width : 768px) and (max-device-width : 1024px){}

Почему так - не понимаю.

[Ankhena]

Legal Adviser,

Или это не верно?

Еще раз: не используйте ширину девайса, пишите просто ширину.

И в вашем "дизайне" не вижу необходимости как-то учитывать ориентацию устройства. Так что это можно сократить.

[Legal Adviser]

Ankhena,

не используйте ширину девайса, пишите просто ширину.

- не понимаю...
Вот так что ли?

@media only screen and (orientation : portrait) and (min-width : 768px) and (max-width : 1024px)

вместо:

@media only screen and (orientation : portrait) and (min-device-width : 768px) and (max-device-width : 1024px){}

[Ankhena]

Legal Adviser, @media (min-width: 768px)

[Legal Adviser]

Ankhena, без only screen and (orientation : portrait) ?

[Ankhena]

Legal Adviser, я не вижу, где вашему дизайну модет быть важна ориентация.
Интересно, почему в этом вопросе я все по 2 раза пишу...
screen можете писать, можете не писать, как хотите

[Legal Adviser]

Ankhena,

я не вижу, где вашему дизайну модет быть важна ориентация.

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

И в вашем "дизайне" не вижу необходимости как-то учитывать ориентацию устройства.

P.S."не обязательно про мой дизайн"
(Решил тоже повториться )) )

[Ankhena]

Legal Adviser, например, нужно показать картинку на весь экран. Одну для портретной ориентации, другую для альбомной.