Ссылки Поиск Написать В избранное NO

Адаптация сайтов для больших (широких) мониторов + Retina

Я уже неоднократно писал про адаптацию сайтов для мобильных устройств и даже принимаю заказы на эту тему (адаптировано уже больше 23 сайтов).


Но пока у меня сломан ноутбук, я вынужден работать за широким монитором с разрешением 1920 на 1080 пикселей. И тут заметна одна очень важная проблема. Если у сайта «резиновый» дизайн, то даже при выставлении ширины 80 - 90%, все меню становятся слишком далеко. А текст, который был красивыми абзацами, растягивается в статье в тонкие строки. При этом получается, что левое меню может стать в несколько раз длиннее самого контента.

Решение простое.

Я добавил в стили сайта ограничение максимальной ширины контента: style="max-width: 1500px;".

Еще можно добавить медиа запросы. Например, добавить стили при ширине экрана больше 1500 пикселей: @media screen and (min-width: 1500px) { тут стили }.

Конечно, можно выбрать и другую ширину контента. Например, для промокодов больше подошло ограничение в 1024 пикселя по ширине.

А чтобы всем поосетителям было удобно, на всех моих сайтах есть скрипт настройки шрифта. Думаю, это сойдет за 2 пункт в настройке сайта для больших мониторов.


Кстати, отдельно хотел написать про мониторы ретина (retina). По идее, для них нужно загружать картинку двойного размера и потом уменьшать в 2 раза в браузере. Это еще можно сделать для иконок, но я не буду заниматься этим с фотографиями. Для начала, они и так уменьшаются автоматически для планшетов и телефонов. А с другой стороны, двойной размер (который еще уменьшен до ширины экрана) будет мешать мобильным пользователям, замедляя работу и тратя платный траффик.

Да, есть еще SVG, растровые изображения и Media Queries (Медиа Запросы) для вылавливания Ретины... но я правда не понимаю, как можно было сделать монитор «высокой четкости», на котором изображения выглядят хуже.

Ну вот был у вас черный квадратик из 4 пикселей, ну и что? Вот вам не плевать, сколько пикселей использует компьютер или телефон для показа этого квадрата. Пусть хоть 128. Главное - чтобы квадратик был черный и размером в 4 пикселя. Ну вот как это ухудшает графику-то?

Ладно, я узнал ответ в интернете, но это уже не относится к теме записи, правда.