@postya

Как верстать правильно если на компьютерах стоит разный зум в настройках windows?

Пример:
Я сверстал страницу, на моем мониторе все выглядит отлично
Мой монитор 1920x1080
Зум в настройках windows 100%
Зум в браузере 100%

У другого человека ноутбук (15 дюймов), с таким же разрешением экрана 1920x1080
Зум в браузере 100%
Зум в настройках windows 125(этот процент стоит автоматически, так как система сама определила)

Верстка у человека с ноутбуком непрваильно отображается, так как стоит зум в 125%
Если он сделает зум на 100% то верстка нормально отображается. Я так понимаю 125% это стандарт для всех ноутбуков(хоят не уверен)

Как в таких случаях правилильно верстать, чтобы верстка выглядела одинаково в разных величинах зума на компьютере? И можно ли вообще такое сделать?

Верстка на моем компьютере:
5f75c133d3cfe831366207.jpeg

Верстка на ноутбуке у другого человека:, виднол что меню слева съехало
5f75c15dce1a0810624936.jpeg
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
@postya Автор вопроса
Решил вопрос таким способом. Добавил ещё одно разрешение для верстки, в котором указывается pixel ratio устройства. 1.25 - это 125% зум экрана

@media (-webkit-min-device-pixel-ratio: 1.25) {
h2 {
    font-size: 4rem;
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@alexalexes
Вам нужно определиться, какую цель вы преследуете при выборе свойства font-size.
1. Физический размер элемента не должен отличаться или малозависим от настроек браузера устройства.
Решение: используем физические величины: mm, cm, in.
2. Размер элемента должен быть всегда столько-то пикселей. Используем px.
3. Размер шрифта должен адаптироваться под возможности комфортного отображения на устройстве.
Используем pt, em, %. В этом случае тестируете разные режимы адаптивности сайта: у пользователя может отличаться размер экрана, плотность пикселей, он может крутить масштаб скажем, от 60% до 150%.
На разработчика ложится это обязанность, чтобы сайт выглядел приемлемо, в разумных изменениях настроек отображения.
Могу путать величины CSS, но такие цели точно есть, и они взаимоисключающие.
Ответ написан
@Steppp
Так и верстай на любом расширении
5f75c65d2d328404811914.png
Ответ написан
Ваш ответ на вопрос

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

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