![](images/chestnut/misc/left.gif) |
06.10.2016, 21:46
|
#1
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Адаптивный дизайн на огромных экранах
Про адаптивный дизайн уже все давно знают. Никого не удивишь страницей, которая адаптируется под маленькие экраны. Но тут я задумался, а как должна вести себя страница на больших экранах, вроде 4K и выше. Я обратил внимание, что некоторые адаптивные сайты даже на Full HD разрешении отображают контент в слишком узкой на мой взгляд колонке, и по краям остаётся место.
Если открыть большинство сайтов на телевизоре 4K, подключенном к ПК под Windows, то страницы выглядят как убогие узкие ленты с мелким контентом посередине экрана. Смею предположить, что если человек сидит не перед самим телевизором, а наблюдает всё это откуда-то с дивана, то у него в браузере уже будет настроен соответствующий масштаб страницы, а следовательно ширина вьюпорта тогда будет гораздо уже, как у обычного монитора.
Тем не менее я проводил эксперимент: начиная с определённой границы ширины вьюпорта, привязывал размер шрифта корневого элемента к ширине вьюпорта. Эффект забавный: страница выглядит одинаково на любом большом экране по отношению к его ширине и никак не реагирует на изменение масштаба (ctrl + "минус" в хроме). В таком случае пользователь лишается возможности уменьшить масштаб страницы, что наверняка не покрывает все кейсы использования больших разрешений.
Кроме того, вроде существуют очень широкие мониторы, но небольшие по высоте (что-то вроде двух мониторов, установленных рядом), и пользователь при этом находится рядом с экраном. Нужно ли говорить, что будет, если я ложно приму такое разрешение за 4K телевизор и растяну соответствующе контент?
Хочу ещё упомянуть всякие ретина дисплеи с повышенной плотностью пикселей, которые на соответствующих устройствах или ОС определяются в браузере как дисплеи с низким разрешением. Например, дисплей, имеющий физически разрешение 4K, может иметь логическое разрешение в браузере Full HD. Это аналог вышеописанной ситуации, когда человек вручную изменил масштаб страницы и вьюпорт стал иметь меньшее разрешение, чем физическое. В таких случаях проблемы нет.
Я же хочу обсудить ситуацию, когда нужно отобразить страницу в браузере с непривычно запредельной шириной вьюпорта. Стоит ли обрабатывать как-то такую ситуацию? Или, если она возникла, то это скорее исключение, и пользователь всё равно сейчас изменит масштаб страницы, чтобы она привела нормальный вид (либо он сидит близко к экрану по какой-то причине и ему и так нормально).
И если мы все придём к мысли, что на большие разрешения экранов стоит забить, потому что это исключительные случаи, которые остаются на совести пользователя, то тогда есть ещё один вопрос. До какого максимального разрешения нужно поддерживать адаптивность дизайна? Если перефразировать: на какую максимальную ширину вьюпорта (логическое разрешение, не физическое) нужно рассчитывать свой дизайн сайта?
Уточню, что речь идёт о простых страницах с двух-трёх колончатым макетом, например, типичный блог на Wordpress.
|
(Offline)
|
|
14.10.2016, 02:53
|
#2
|
ПроЭктировщик
Регистрация: 01.01.2016
Сообщений: 141
Написано 72 полезных сообщений (для 159 пользователей)
|
Ответ: Адаптивный дизайн на огромных экранах
960
возможно 1000
1280 - это максимум.
Тут следует учитывать, что растягивать страницу в ширину - тоже не есть хорошо, ибо 1) Читать текст неудобно, особенно когда дочитываешь строку, то при слишком большой ее длинне строка легко теряется из виду в момент перескока на следующую строчку. 2) общее восприятие информации становится не таким очевидным. Все таки, человеческому глазу привычнее портретная ориентация. Даже ВКонтакте этим не заморачиваются, у них наскок я знаю 1000 пикселей - это максимум.
|
(Offline)
|
|
Эти 3 пользователя(ей) сказали Спасибо mingw за это полезное сообщение:
|
|
14.10.2016, 10:52
|
#3
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Адаптивный дизайн на огромных экранах
Я в общем-то не предлагал увеличивать длину строки. Можно увеличивать размер шрифта на больших экранах. Идея в том, что если у тебя небольшая диагональ, но при этом большое разрешение, то увеличенный шрифт будет смотреться как надо. Другой вопрос, что скорее всего у человека итак уже всё настроено под его разрешение, если он работает за таким экраном, а следовательно никаких действий от меня не требуется. Либо другой вариант, если у человека одновременно и большой экран, и большая диагональ. Тогда я могу предположить, что человек смотрит на экран издалека (то есть TV mode), и шрифт тоже должен быть больше, чтобы быть читаемым. Но и в этом случае наверняка у человека уже всё настроено как надо и опять же мне такую ситуацию при разработке страницы обрабатывать никак не надо.
|
(Offline)
|
|
14.10.2016, 11:24
|
#4
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Адаптивный дизайн на огромных экранах
|
(Offline)
|
|
14.10.2016, 20:56
|
#5
|
ПроЭктировщик
Регистрация: 01.01.2016
Сообщений: 141
Написано 72 полезных сообщений (для 159 пользователей)
|
Ответ: Адаптивный дизайн на огромных экранах
Сейчас же поголовно все разрабы переходят в паттерн mobile-first. Ибо его доля растет. Навряд ли кто-то задается такими вопросами...
Однако.
Насколько я знаю, в CSS3 есть свойства, которые привязывают размер шрифта к размеру окна браузера. (через JS это вообще в пару строк делается)
|
(Offline)
|
|
15.10.2016, 16:26
|
#6
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Адаптивный дизайн на огромных экранах
Ты прикалываешься или реально не понимаешь в чём суть проблемы? Я итак сделал привязку размера шрифта к ширине, скриншоты даже показал. Вопрос в том, оправдан ли такой подход. В первом посте я указал свои мысли на этот счёт.
Мока, ты где?
|
(Offline)
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 04:57.
|