Какие подводные камни существуют при адаптации макета сайта под мобильные устройства?

Question

[Александр]

Например, будет ли следующая строчка на CSS иметь тот же эффект на мобильных устройствах:

input {
border: 1px solid white;
}

Недавно мне встречался пост одного человека, который утверждал, что данный код работает на смартфоне не так, как он того ожидал.

Comments

[Rustam Bainazarov]

Надо говорить, что он имел в виду. Этот код будете нормально работать везде. Могут быть визуальные баги (исчезнет граница, например), если поставить такой масштаб, при котором виртуальный 1px границы будет меньше физического пикселя устройства.

Это возможно при определеных обстоятельствах (например, нет адаптивности и задана ширина сайта 1300px), поэтому все эти 1300 пикселей вписаны на экране. Но само правило спокойно работает и если чуть приблизить, то граница появится.

[Александр]

Рустам Байназаров, он писал, что правая и верхняя граница толще, чем левая и нижняя. Кто-то написал, что это из-за DPR, хотя как это может быть из-за него? По идее, такого не должно было случиться, ведь DPR и по вертикали и по горизонтали один и тот же (или нет?).
Ссылка на оригинал

[Rustam Bainazarov]

Александр, это может быть только в том случае, как я описал выше, когда дробные значения. Производители мобильных телефонов стандартно делают всегда четкие значения масштаба (x2, x3 и т. д.), поэтому таких проблем не возникает.

Он мог поставить какое-нибудь кастомное значение масштаба а-ля 2.36, вот у него получился такой чисто визуальный баг.

Лично я таких багов не видел. Только если у сайта нет адаптивности, задан размер в метатеге и ещё какой-нибудь initial-scale=1.2. И сайт вписан в экран. Но и то при увеличении все это перендерится нормально и все такие моменты уйдут.

[Rustam Bainazarov]

Александр, вот, например, в Android очень часто в меню разработчика можно задать свои значения тут и получить дробные значения viewport на выходе:

[Rustam Bainazarov]

Александр, прочитал ветку — люди какой-то фигнёй там занимаются :))

Типа этого:


Удачи им поддерживать хотя бы средний проект с такими штуками повсеместно. Ерундой страдают.

Это всё нужно только каких-то очень отдельных случаев, но не в качестве обыденного инструмента.

[Александр]

Рустам Байназаров, да, ерунда та еще. Ведь, если мы указываем border-width: 1px, то на мобильном устройстве, по идее, граница должна отображаться примерно в том же масштабе, как и на экране монитора, ведь на один пиксель монитора приходится около 2-3 пикселей современного мобильного устройства.

Answer 1

[Дима Долготер]

разница может быть в разных браузерах. Но эта на телефоне в гугл хроме будет работать так же как ии на компе. А вообще это можно тестировать самому и не справшивать

Answer 2

[Роми]

А чего он ожидал? Что она даст ему отступ сверху в 10 пикселей, а она ему просто дала белый контур в один пиксель вокруг блока? :)

Эта строчка по идее должна везде работать одинаково, даже в древних браузерах.