Как правильно задавать размеры элементов при верстке под мобильные устройства?
Верстаю игрушку под социальные сети, столкнулся с проблемой - не понимаю как работать с размерами при верстке под мобильные девайсы.
Сверстал несколько экранов, при верстке пользовался эмуляцией девайсов в chrome dev tools, а также проверял на nexus 5. С версткой под мобилки сталкиваюсь первый раз, решил попробовать сделать так - сверстать все с фиксированными размерами под какое-нибудь популярное разрешение. Рассчитывал что при таком подходе на девайсах с большим разрешением все будет ок, просто увеличатся отступы между элементами, что не сильно критично, а девайсы с более мелким разрешением подгоню с помощью @media
В chrome dev tools результат отличный, все отображается как и ожидал (верстал под размеры 360x640, выбрал nexus 5 в качестве девайса в настройках). На реальном нексусе чуть хуже, некоторые элементы наехали друг на друга, но в целом не критично, поправить легко, результат близок к ожидаемому. Разрешение у nexus 5 - 1920x1080, pixel-ratio 3.
Далее начались проблемы. Взял samsung grand duos (480x800, pixel-ratio 1), на нем все выглядит очень мелким, причем отличие от нексуса раза в 2-3, т.е. разница крайне существенная. Посмотрел с помощью js размеры экранов этих девайсов (window.screen.width, window.screen.height) выдало примерно одинаковые числа, ширина в обоих случаях 360, разница только в высоте, и то не критичная. Попробовал на самсунге другой браузер (первым был стандартный браузер девайса, юзер агент говорит что это хром 28) - chrome последней версии. Тут уже получил нормальный результат, примерно как на нексусе. Подумал что проблема в кривом стандартном браузере на саумсунгах.
Однако, после проверил верстку на htc one mini (720x1280, pixel-ratio 1) и iphone 5 (640×1136, pixel-ratio 2), та же проблема, картинка на экране в разы меньше чем на нексусе 5.
В общем, совершенно запутался с этими размерами.
Как правильно подходить к подобной верстке? Все размеры в относительных величинах?
Обдумывал вариант с %, но боюсь что из-за разного соотношения сторон на девайсах могут нарушаться пропорции в картинках. Может через vw/vh? Причем выражать все размеры только через одну из этих едениц, чтобы не зависеть от соотношения сторон.
Вьюпорт задан, width=device-width, initial-scale=1.0 прописано.
Правда на всех проблемных девайсах заметил такую вещь - я во вьюпорте запретил юзер-скейлинг, в нексусе скейлить не дает, а на проблемных девайсах скейл работает. Может-быть какая-то проблема с вьюпортом?
Попробуйте в вьюпорт поставить width=640px (т.е. нативную ширину, под которую вы изначально верстали.) Должно все ок стать. А вообще мобильные интерфейсы лучше в em делать и базовый размер шрифта в vw задавать (ну или js-ом его регулировать для старых девайсов).
Простой
