Какой самый максимальный размер экрана телефона?

Question

[Dvorak]

Хочу настроить media так, чтобы при открытии сайта с телефона подключался другой css-файл. Идея стара как мир, собственно. Но при каком значении width надо это делать?

Answer 1

[Stalker_RED]

Когда-то был вот такой:

Но производители не останавливаются, появляются диагонали побольше:

И еще больше!
https://www.youtube.com/watch?v=fXCETvEce3w

А если вы не про физическую диагональ, а про разрешение, то 4к телефоны вроде как уже в продаже.

Не заморачивайтесь на разделении телефон/не телефон. Смотрите на размер вьюпорта, а лучше на размер окна: www.quirksmode.org/mobile/viewports.html

Answer 2

[Антон Щербаков]

Нет максимального размера экрана "телефона". Ваш ресурс могут открыть с планшета с разрешением 2560*1440. И тут возникает вопрос, вы сможете "вот-прям-точно" безошибочно разделить планшет и телефон?

Мой совет, планируйте прототип, дизайн и адаптивную верстку, не обращая внимание на разделение "телефон/планшет/ПК", а подстраиваясь именно под размер. Подстраиваться надо только при написании стилей под браузеры для "телефонов/планшетов/ПК".

Answer 3

[Павел]

Для адекватной работы сайта вам нужно определить следующие параметры:
1) есть ли в устройстве тач-ввод (для определения минимального размера активного элемента, и когда нужно включать/отключать hover-поведение)
2) какое dpi(ppi) у устройства (можно определять с помощью media)
3) какое разрешение вьюпорта у устройства. Может быть и 4к-дисплей, а вьюпорт разработчиком будет задан как 384px на 968px

И самое главное: в адаптивном дизайне не важно устройство, важно подстраивать дизайн под тип ввода (тач - мышка) и под вьюпорт. Представляйте клиента не как телефон/планшет/ноутбук, а как растягивающийся экран от 4 до 27 дюймов. Меньше 4 - уже совсем другой UI (часы всякие), больше 27 - уже пошли телевизоры, тоже со своими причудами. Там и возможности браузера ограничены и тип ввода другой - 3d-мышка или magic-mouse