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

Блоггер / Блог 2015 год

RSS лента новостей, Подписка по Email

      Адаптация сайтов для больших (широких) мониторов + 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 пикселя. Ну вот как это ухудшает графику-то?
         Ладно, я узнал ответ в интернете, но это уже не относится к теме записи, правда.

         
         
Главная, 1, 2,
( 70 )