xtala
@xtala
Постигает Дзен

Тестирование верстки сайта в 4K без монитора 4K?

Всем привет!
Возник тут вопрос по поводу верстки сайта в больших разрешениях. Довольно много людей сейчас пользуется широкоформатными мониторам 4K ( 3840 × 2160 вроде ?), поэтому возникает потребность тестирования верстки на таких разрешениях не меньше чем на мобильных. В связи с чем вопрос как провести тестирование верстки сайта в 4K без монитора 4K программными средствами? Подойдет ли встроенный отладчик Chrome? Сайт сверстанный на каноничном бутстрап выглядит как несчастная полоска в 1170 пикселей или viewport масштабирует сайт до читабельного размера? Пользователем таких мониторов постоянно приходится масштабировать сайты? Может есть более удобный сервис тестирования верстки в больших разрешениях?
Спасибо.
UPD: 1 Прилагаю скриншоты с тестированием хабра в хроме и фаерфоксе. Если верить хрому хабр на 4к мониторах масштабируется по краям на весь монитор и все элементы соответсвенно тоже. Если верить файрфокс хабр центрируется а верхняя панел заражается комммунизьмомъ и улетает в лево до края. Кому верить? В тред кастуются владельцы 4к мониторов со скриншотами хабра на своем монстродевайсе фуллвиндоу -- браузер хром.
13804978dc20a3484936cfa5f4e7d3d1.png78f698d79469013985f7a31a47792557.png
  • Вопрос задан
  • 17246 просмотров
Решения вопроса 2
DevMan
@DevMan Куратор тега CSS
я не знаю ни одного человека, который бы пользовал 4к(и выше)-монитор в родном/полном разрешении, это же надо смотреть на монитор через телескоп.
их пользуют в hidpi-режиме, в котором разрешение эквивалентно fullhd. почитайте только дополнительно про оптимизацию графики под hidpi.
Ответ написан
xtala
@xtala Автор вопроса
Постигает Дзен
Тривиального решения задачи нет. Ошибка многих начинающих (и меня тоже), то что физическое разрешение мониторов принимается за CSS разрешение.
На самом деле как подсказал DevMan мониторы с ретина дисплеем в большинстве случаев работают как FullHD мониторы с соотношением x/2, где x
физическая ширина монитора, в полном разрешение на таких мониторах работать в web затруднительно. Теперь ответы по существу:

1. В связи с чем вопрос как провести тестирование верстки сайта в 4K без монитора 4K программными средствами?


-- Отладчик бразуера Chrome. Открываем панель разработчика, включаем адаптивный вид, задаем дополнительный девайс
класса desktop с размерами 1920 * 1080. Примерно так и будет выглядеть сайт на ретине дисплее с физическим разрешением 3840
Так же хочу предупредить, что в режиме responsive, некоторые сайты отображаются неверно (Например Хабр полностью прилипает по краям, а в реальности как и Toster центрируется).
Поэтому надо задавать именно через устройство, а не вбивать значения в режиме responsive.
У этого способа есть фатальный недостаток, при таком разрешении сайт масштабируется в меньшую сторону,
что не позволяет разглядеть мелкие детали, а если увеличить масштаб до 100% показывается только верхний левый угол сайта, но нельзя прокручивать его по сторонам,
чтобы разглядеть во всех деталях. Поэтому этот способ подойдет только для обозрения сайта на больших разрешениях с "высоты птичьего полета".
-- Отладчик брузера Firefox на удивление именно он наиболее корректно отображает сайты на таких разрешениях и в отличии от Chrome позволяет прокручивать их по сторонам, чтобы разглядеть все детали. Пожалуй этот способ самый приемлимый.
-- Сайт ami.responsivedesign.is/# неплохой сервис, позволяет быстро сделать презентацию как выглядит сайт на разных устройствах, в том числе и на больших мониторах, но есть два недостатка:
1) Большой монитор мака отображает сайт в CSS разрешении 1600*992, а не 1920 * x, наверное это связанно с тем, что последнее обновление сайта было в 2013 году.
2) Некоторые сайты не грузятся (например Хабр), возможно это связанно с какими то скриптами
-- Сайт quirktools.com/screenfly
Тоже что и предыдущий пример. Немного удобней. Недостаток тот же. У меня отказался грузить некоторые сайты. Например хабр.
Как плюс можно отметить расшаривание ссылки, что может пригодиться для обмена мнениями с удаленным разработчиком или заказчиком.
-- https://www.browserstack.com
Предоставляет даже реальные устройства в Live режиме(или эмулированные?). Недостаток один -- платный. Правда есть триал, во время триала позволяют пользоваться устройствами 30 минут и не всеми браузерами.

2. Подойдет ли встроенный отладчик Chrome?


Подойдет, но не совсем, см п1. лучше использовать Firefox.

3.Сайт сверстанный на каноничном бутстрап выглядит как несчастная полоска в 1170 пикселей или viewport масштабирует сайт до читабельного размера?


Отображается как на мониторе 1920 * X . Выглядит вполне прилично. Конечно, если бы такие мониторы использовались в реальном разрешении сайты на бутстрап в развернутом окне выглядели бы как танковая щель.

4. Пользователем таких мониторов постоянно приходится масштабировать сайты?


Нет.

5. Может есть более удобный сервис тестирования верстки в больших разрешениях?


Самые удобные сервисы перечисленый в п1. Сколько я ни старался удобнее не нашел.

В заключение пара полезных статей по верстке в больших разрешениях:
Рассуждения об адаптации верстки для больших экранов, статья старая, но актуальность не потеряла:
https://web-standards.ru/articles/big-screens/

Тренды экранов на текущий момент:
https://www.openstat.com/counter:meta/trends/repor...

Адаптируем графику под Retina экран
https://habrahabr.ru/post/139682/
Статья правда написана 5 лет назад непонятно насколько сейчас она актуальна.

Оптимизация графики для Retina-экранов
https://habrahabr.ru/post/150071/

P.S. Отдельное спасибо DevMan за терпение.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@asmrnv777
У меня в стабильном хроме на UltraHD (3840x2160) дисплее на macOS все рисуется так же, как и на FullHD, только текст выглядит намного приятнее, пример:
45f2ccb4e45c434bbd118f57c56f5019.png
А вот то же самое окно на Full HD дисплее:
dd3682f84b374285b81d1f234998b0ab.png

Хотел бы напомнить про хайрез фавиконы, чтобы не получилось вот так:
2d4daa3cb5d74ca3892feef78dfdb357.png

А вообще, советую купить UltraHD монитор, современные встроенные в процессор GPU без проблем их тянут, не говоря уже про нормальные GPU, к тому же, очень неплохой Dell P2415Q стоит чуть больше 500 долларов.
Ответ написан
Я просто в FF ставлю нужную ширину:
joxi.ru/Dr86O0DI4yEZk2
Как раз вчера была необходимость такого тестирования, заказчик проверял на огромном маковском мониторе. В общем проблем не обнаружил, все как я видел на свое мониторе, так же отображалось у заказчика.
Ответ написан
Комментировать
@Dolosweb
Советую не верстать под 4к, а лучше заняться масштабированием контента - чтобы отображался как 1920p с увеличенным адаптивным размером. В конечном итоге пользователь хочет удобства, а не разращения.
Ответ написан
Комментировать
1) В Firefox не протестируешь никак, там дебаг адаптивной верстки сделан криво, нет масштабирования (по ходу нужно добавить баг в багтрекер ФФ)
2) Не путать физический размер экрана с CSS размером (последнйи можно посмотреть здесь screensiz.es или dpi.lv пункт dppx)
3) В Хроме в режиме адаптивной верстки добаляете свой девайс и дебажите, там масштабирование есть, поєтому размер тестируемого єкрана может біть больше чем размер вашего
4) Не забіваем про https://www.w3schools.com/css/css_rwd_viewport.asp
5) Не забываем про vw, vh, vmin, vmax caniuse.com/#feat=viewport-units
f83a46e1c8c14ce18a4f9cb1e0e83f92.png
Ответ написан
@rchuvilev
Для меня вопрос теоретический, но я обычно адаптивность задаю не только по ширине колонками сетки, но и по высоте размером в vh. Гипотетически, на всех экранах все будет выглядеть одинаково, так как пропорции в разрешении одни, а оба измерения заданы отношением. Хром тулз, вроде, подтверждают теорию.
П.С. Также есть browserstack.com
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы