Почему сайт с максимальной шириной 1280 во всю ширину на Retina дисплее?

Question

[Владимир]

Есть сайт максимальной шириной 1280px, который на обычном монике шириной 1980px отображается нормально, на macbook air тоже норм все,
а на MacBook Pro Retina 2880х1800 сайт отображается не как 1280, а на всю ширину. Что это и как можно избежать такого поведения?

Скрин с MacBook Pro:

Comments

[Lynn «Кофеман»]

Прекратите путать физическое и логическое разрешение.

[Владимир]

Алексей Тен: т.е.?

[automatik]

Владимир: то есть у тебя скриншот в 1280, сайт тоже в 1280. В чем проблема?

[Владимир]

automatik: Окей, я сразу не обратил внимания на разрешение скрина, значит нужно клиенту запрос еще раз делать, т.к. он заявил что у него retina разрешение

[Lynn «Кофеман»]

Владимир: т.е. на физическом разрешении 2880 можно средствами ОС выбрать любое логическое разрешение, так что все приложения будут считать, что они работают в нём.

https://support.apple.com/kb/PH19043?locale=ru_RU

[Lynn «Кофеман»]

Кстати, дефолтное на этом маке будет 1440×800

[Владимир]

Алексей Тен: Ага, не знал, спасибо, значит нужно разбираться с клиентом

Answer 1

[Андрей Хохлов]

Почитайте что такое ретина.
MacBook Pro имеет логическое разрешение 1440х900

Под рукой пример с айфонами https://www.paintcodeapp.com/news/ultimate-guide-t... но думаю по нему поймёте как это работает.

Comments

[Нерон Лордов]

и как все таки обойти логическое разрешение, чтобы рендер страницы опирался на физическое разрешение?

[Андрей Хохлов]

Nekto_Habr: зачем? Сделайте масштаб 50% в браузере - неужели хотите чтоб сайт выглядел так?

[Нерон Лордов]

Андрей Хохлов: я хочу чтобы у посетителей с достаточным разрешением применялось определенное масштабирование. Не 50% уж, 75-80 было бы в самый раз

[Андрей Хохлов]

Nekto_Habr: как пользователь мака я вам спасибо за такое не скажу

[Владимир]

Nekto_Habr: Я нашел решение для себя в виде применения свойства zoom: 0.85; к элементу body на всем сайте, правда после этого потребовалось немного верстку подправить. Но это рабочее решение. Можно так же привязать свойство zoom именно к ретина дисплеям используя media запрос https://css-tricks.com/snippets/css/retina-display...

[Нерон Лордов]

Андрей Хохлов: почему? разве не лучше отображать побольше информации, а не тот куцый обрезок сайта, который на скриншоте в вопросе?

Владимир: спасибо, буду знать, что это возможно)

[Андрей Хохлов]

Nekto_Habr:

с масштабом 80%: take.ms/mySj2 - очень мелкий шрифт, приходится напрягать глаза, появляются артефакты

масштаб 100%: take.ms/1GWzd - красота, глаза не устают

Если вы решили, что знаете как лучше пользователям макбука воспринимать информацию - вы ошибаетесь.

Если вы сам пользователь макбука и вам комфортно уменьшить масштаб - уменьшите у себя.

Самое главное! Если вы хотите, чтобы на вашем сайте в первый экран помещался определенный набор информации (УТП, call to action, что-там-ещё-принято) - решайте эту задачу средствами дизайна, а не странных костылей.

Пару раз видел сайты, играющие в принудительных зум, как предлагает Владимир - выглядели они коряво и я с них быстро уходил.

[Нерон Лордов]

Андрей Хохлов: Тостер не очень корректный пример, он широкий (на глазок - 1400рх, а не 1280). На моем фулл-хд мониторе он выглядит так же, как на твоем 100%-ом скриншоте.

короче, переформулирую проблему. На физически маленьких мониторах следует отображать не десктопную версию (которая будет одинакова и для 23" фулл-хд и для 11" 1360х768), а планшетную например. То есть, исходить нужно даже не из разрешения, а из диагонали... Ай, пустое. Хрен с ним :)

[Андрей Хохлов]

Nekto_Habr: так прозумьте на своём 11 дюймовом экране как вам угодно и не лезьте к другим. Вот, 250% и сижу смотрю на версию для смартфонов: take.ms/BfF8n