Почему такая разница и как с этим бороться?

Question

[Legal Adviser]

Всем привет,
Требуется пояснение.
Добиваю css под гаджеты, не могу понять почему такая сильная разница в отображении.
В браузерах на винде:

На iPad:

Как облегчить себе такое обстоятельство? Это же "Ж..А" сидеть с кучей устройств ))) и перепроверять...

Comments

[Rustam Bainazarov]

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

[Legal Adviser]

Рустам Байназаров, Согласен, скрины выкладывал. Подгонка в браузере Chrome Версия 83.0.4103.61 (Официальная сборка), (64 бит). Второй скрин с iPad Pro (10,5") - а это страница примера.
Жду от вас конструктивной критики с примерами.

[Rustam Bainazarov]

Legal Adviser, навряд ли можете чего-то ждать от меня, т. к. вы мне не платили за работу.

Но ошибка, как минимум, в том, что в Chrome вы смотрите viewport iPad'а 9,7 (1024 по ширине), тогда как у iPad'а 10,5 viewport совершенно иной (1112 по ширине), оттого ваш медиазапрос и не срабатывает. А у iPad 12 он, например, вообще 1366px. Они все отличаются.



Более того, использование жесткого медиазапроса, который вы явно нашли в Интернете, — не очень рационально, т. к на десктопе с подобной шириной, но иной высотой он уже не сработает.

[Legal Adviser]

Рустам Байназаров, Благодарю за ответ, в особенности за whatismyviewport.com о котором я не был в курсе.

[Legal Adviser]

Рустам Байназаров, А как себя избавить от сей проблемы и обхватить максимум? Я не использую

жесткого медиазапроса

, стараюсь максимум - width: 25%-100%;

жесткого медиазапроса,

- для компов (width: ~100px; )

Answer 1

[DarkRou]

скорее всего у хромовского и вашего айпада разные разрешения экранов. Эпл же не нумерует айпады никак, вот и вышел такой казус

Comments

[Legal Adviser]

А как же тогда подгоняют CSS все, кто профессионально этим занимаются? Они все сразу в iOS сидят?
У меня то обычный PC с Win... Вот пытаюсь разобраться и понять, как мне быть...

[DarkRou]

Legal Adviser, Так не обязательно всё идеально подгонять по каждое устройство, да и много времени это займет. Легче использовать относительные значения, если известно как именно всё должно выглядеть. А так, было одно расширение для хрома...уже не помню названия, но его можно было использовать чтобы смотреть как сайт выглядит, на тех или иных устройствах

[DarkRou]

Legal Adviser, я обычно использую такие значения как vh и vw так, почти на всех устройствах будет выглядеть одинаково, если конечно соотношения сторон одинаковые. Но это мешает сделать "красиво", поэтому использую только в случаях маленьких смартфонов

[Legal Adviser]

DarkRou,

значения как vh и vw

- Я к этому тоже склоняюсь )) Но только для мобильного )) А вот под iPad и РС хочется сделать красиво... iOS интересная штука, но с подгоном на винде - просто "жо..а"...

Answer 2

[ThunderCat]

Как облегчить себе такое обстоятельство? Это же "Ж..А" сидеть с кучей устройств ))) и перепроверять...

Никак, в основном ориентируются не на устройства, а на разрешение экрана, ну и проверяют на самых популярных девайсов, а на все что занимает меньше 2-3 процентов посетителей тупо кладут болт. Если заказчик имеет конкретный девайс из перечисленной группы можно потрвозиться с конкретным девайсом индивидуально, в остальном никого это особо не волнует, кроме особо крупных сайтов, где есть свои спецы.