Как правильно задавать размеры в CSS для экранов с большим DPI?
Здравствуйте.
Верстаю макет, отрисованный с шириной 1920px. На ноутбуке клиента (1920x1080) под Windows 10 выставлен масштаб 125%, и у него все шрифты и элементы с заданными в px размерами, выглядят крупнее, чем на макете.
Подскажите, пожалуйста, как правильно обработать такую ситуацию? Как сделать, чтобы и на других экранах было нормально (150%, 175%, Apple Retina)?
Крупнее, потому что у него viewport больше. CSS-пиксели ≠ физические. Вы же делали адаптивность, правильно? При вёрстке для вас не должно быть никакой разницы, есть масштабирование, нет ли, есть ли Retina (то же масштабирование) или нет.
Рустам Байназаров, Адаптивность да, но у меня, допустим для 1920 размер шрифта 18px, а у клиента на ноутбуке он выглядит крупнее, чем на макете, так как в системе у него (даже не в браузере) стоит скейлинг 125%.
gvozd1989, ну так значит это его решение. Скейлинг ОС прямо влияет на то, какое viewport будет у браузера. При заданных параметрах у него viewport примерно равен 1440 пикселям.
Более того, до сих самые популярные десктопные разрешения — 1360 и 1440 пикселей (без учёта полосы прокрутки). Делать основной макет, ориентируясь на 1920, — опрометчиво.
Более того, я вам скажу, что настройки масштабирования ОС у большинства относительно современных и, считайте, всех современных ноутбуков на Windows с экраном FullHD из коробки как раз 125%.
gvozd1989,
Тут можно узнать разрешение экрана браузера myresolutionis.ru
Если у него экран на ноуте 1920, то с учетом масштаба там будет 1536. То есть он смотрит адаптивный вариант.
Рустам Байназаров, screen.width у него показывает 1536px. Правильно я понимаю, что нужно сделать медиа-запрос (min-width: 1440px) и пересчитать все размеры с уменьшением?
И под какие разрешения вы советуете вообще отрисовывать макеты?
gvozd1989, советую, что бы весь контент вмещался в максимум 1340px, а так вообще в 1200px. Всё зависит от дизайна и задачи. Посмотрите, как сделаны популярные сайты.
