Адаптивный дизайн на огромных экранах

[Phantom]

Про адаптивный дизайн уже все давно знают. Никого не удивишь страницей, которая адаптируется под маленькие экраны. Но тут я задумался, а как должна вести себя страница на больших экранах, вроде 4K и выше. Я обратил внимание, что некоторые адаптивные сайты даже на Full HD разрешении отображают контент в слишком узкой на мой взгляд колонке, и по краям остаётся место.

Если открыть большинство сайтов на телевизоре 4K, подключенном к ПК под Windows, то страницы выглядят как убогие узкие ленты с мелким контентом посередине экрана. Смею предположить, что если человек сидит не перед самим телевизором, а наблюдает всё это откуда-то с дивана, то у него в браузере уже будет настроен соответствующий масштаб страницы, а следовательно ширина вьюпорта тогда будет гораздо уже, как у обычного монитора.

Тем не менее я проводил эксперимент: начиная с определённой границы ширины вьюпорта, привязывал размер шрифта корневого элемента к ширине вьюпорта. Эффект забавный: страница выглядит одинаково на любом большом экране по отношению к его ширине и никак не реагирует на изменение масштаба (ctrl + "минус" в хроме). В таком случае пользователь лишается возможности уменьшить масштаб страницы, что наверняка не покрывает все кейсы использования больших разрешений.

Кроме того, вроде существуют очень широкие мониторы, но небольшие по высоте (что-то вроде двух мониторов, установленных рядом), и пользователь при этом находится рядом с экраном. Нужно ли говорить, что будет, если я ложно приму такое разрешение за 4K телевизор и растяну соответствующе контент?

Хочу ещё упомянуть всякие ретина дисплеи с повышенной плотностью пикселей, которые на соответствующих устройствах или ОС определяются в браузере как дисплеи с низким разрешением. Например, дисплей, имеющий физически разрешение 4K, может иметь логическое разрешение в браузере Full HD. Это аналог вышеописанной ситуации, когда человек вручную изменил масштаб страницы и вьюпорт стал иметь меньшее разрешение, чем физическое. В таких случаях проблемы нет.

Я же хочу обсудить ситуацию, когда нужно отобразить страницу в браузере с непривычно запредельной шириной вьюпорта. Стоит ли обрабатывать как-то такую ситуацию? Или, если она возникла, то это скорее исключение, и пользователь всё равно сейчас изменит масштаб страницы, чтобы она привела нормальный вид (либо он сидит близко к экрану по какой-то причине и ему и так нормально).

И если мы все придём к мысли, что на большие разрешения экранов стоит забить, потому что это исключительные случаи, которые остаются на совести пользователя, то тогда есть ещё один вопрос. До какого максимального разрешения нужно поддерживать адаптивность дизайна? Если перефразировать: на какую максимальную ширину вьюпорта (логическое разрешение, не физическое) нужно рассчитывать свой дизайн сайта?

Уточню, что речь идёт о простых страницах с двух-трёх колончатым макетом, например, типичный блог на Wordpress.

[mingw]

960

возможно 1000

1280 - это максимум.

Тут следует учитывать, что растягивать страницу в ширину - тоже не есть хорошо, ибо 1) Читать текст неудобно, особенно когда дочитываешь строку, то при слишком большой ее длинне строка легко теряется из виду в момент перескока на следующую строчку. 2) общее восприятие информации становится не таким очевидным. Все таки, человеческому глазу привычнее портретная ориентация. Даже ВКонтакте этим не заморачиваются, у них наскок я знаю 1000 пикселей - это максимум.

[Phantom]

Я в общем-то не предлагал увеличивать длину строки. Можно увеличивать размер шрифта на больших экранах. Идея в том, что если у тебя небольшая диагональ, но при этом большое разрешение, то увеличенный шрифт будет смотреться как надо. Другой вопрос, что скорее всего у человека итак уже всё настроено под его разрешение, если он работает за таким экраном, а следовательно никаких действий от меня не требуется. Либо другой вариант, если у человека одновременно и большой экран, и большая диагональ. Тогда я могу предположить, что человек смотрит на экран издалека (то есть TV mode), и шрифт тоже должен быть больше, чтобы быть читаемым. Но и в этом случае наверняка у человека уже всё настроено как надо и опять же мне такую ситуацию при разработке страницы обрабатывать никак не надо.

[Phantom]

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

Ширина 1024


Ширина 1280


Ширина 1600


Ширина 1920


Ширина 2560


Ширина 3840


Видите о чём я говорю? Последние четыре скриншота можно отличить только по размерам интерфейса браузера вверху.

P.S. Не обращайте внимания на заквадраченную графику на больших разрешениях, она не создавалась под большие экраны. Это лишь демонстрация концепта. Хотя, вру, эта страница уже с полгода в продакшене.

[mingw]

Сейчас же поголовно все разрабы переходят в паттерн mobile-first. Ибо его доля растет. Навряд ли кто-то задается такими вопросами...

Однако.

Насколько я знаю, в CSS3 есть свойства, которые привязывают размер шрифта к размеру окна браузера. (через JS это вообще в пару строк делается)

[Phantom]

Ты прикалываешься или реально не понимаешь в чём суть проблемы? Я итак сделал привязку размера шрифта к ширине, скриншоты даже показал. Вопрос в том, оправдан ли такой подход. В первом посте я указал свои мысли на этот счёт.

Мока, ты где?