Как определить рабочую ширину макетов для адаптивного дизайна?

Question

[skovaleva]

Я хочу отрисовать сайт для десктопной, планшетной и мобильной версии. Везде рекоменндуется брать стандартные разрешения экранов:
1. Мобильные телефоны — 320px.
2. Планшеты — 768px.
3. Десктоп и планшеты в ландшафтной ориентации — 1200px.
Я так понимаю, это минимальное разрешение рабочей области. Здесь видно, что чем меньше разрешение, тем меньше экран, и все довольно логично. Но как известно, сейчас разрешение на мибильных устройствах достаточно большое. Например, у меня разрешение по ширине телефона - 1920, планшета - 2560, а ноутбука - 1920.
Как в таком случае отрисовывать планшетную и мобильную версию? Если я отрисую мобильную версию сайта под 320 px, то получается у меня сбоку останутся огромные колонки?Но ведь это не так. В мобильное версии сайт не центрируется как в десктопной версии. Или я чего-то не понимаю.

Answer 1

[dom1n1k]

https://mydevice.io/devices/
Там есть физические размеры и css-размеры - это разные вещи. Это абсолютно базисная вещь, не понимая которую, невозможно работать веб-дизайнером или верстальщиком.

Абсолютное большинство телефонов на Андроиде имеет одиинаковую логическую ширину экрана - 360px. Хоть там экран HD, FullHD или ещё больше. Ширина 320 была раньше и то по большей части среди бюджетников, сейчас её уже почти не осталось.
Хотя рисовать макет именно 320 логика все же есть - он гарантированно поместится везде.
Айфоны до пятерки включительно имели ширину 320, от шестерки и дальше - 375.
Фаблеты обычно имеют размер порядка 390-420.

Comments

[skovaleva]

- А можете пояснить, что за CSS-размеры, и почему они имеют отличия от физических размеров?То есть при отрисовке сайта на планшетах и телефонах, я должна ориентироваться на CSS-размеры?
- И я так понимаю, что логично отрисовывать экраны в минимальном разрешении, т.к. при верстке легче растянуть под определенное разрешение экранов (а размеры у всех экранов разные). Но в таком случае для чего нам нужна информация о физических размеров?Для того, чтобы правильно подобрать изображения?

[dom1n1k]

Потому что физические размеры телефонов плюс-минус похожи друг на друга и крутятся сейчас в районе 5 дюймов.
А разрешения экранов могут отличаться едвали не на порядок: от 480*800 у устаревшего low-end до 2960*1440 у самых дорогих galaxy.
Что будет, если все элементы интерфейса будут отличаться в аналогичное число раз? На первом устройстве всё будет огромное, на втором микроскопическое.
Поэтому ОС оперирует виртуальными пикселями, которые могут состоять из нескольких физических пикселей экрана.
То есть когда Самсунг рапортует об очередном убер-девайсе на кучу мегапикселей - размеры элементов на экране остаются те же самые, но увеличивается четкость.

Отрисовывать логично в двойном разрешении, то есть ширина 320*2=640.
Потому что телефонов с одинарной плотностью пикселей уже практически не осталось, кроме совсем уж легаси на руках.