Управляем видимостью информации на разных устройствах
Адаптивный дизайн – залог успешного сайта, этот фактор влияет и на поисковую выдачу.
Адаптивный – это какой?
Адаптивный дизайн – тот, который подстраивается под разные разрешения экрана при этом не теряя своей привлекательности. Это может производится как и засчёт адаптации каждого элемента сайта, так и банальным управлением отображения/скрытия контента на мобильных устройствах. Процесс создание адаптивного дизайна достаточно трудный, но скрыть или показать блоки сайта в зависимости от разрешения можно за несколько минут.
Как сделать адаптивную вёрстку?
Для того, чтобы сайт подстраивался под разные типы устройств, необходимо задать значения под все диапазоны экранов в таблице стилей CSS. Каждый шаблон состоит из блоков, у которых есть свой класс или идентификатор. Необходимо найти в таблице стилей нужный блок и прописать его поведение при различных экранных разрешениях. Возьмём, к примеру, фрагмент из таблицы стилей моего сайта. Блок w-container.
Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.
И таким образом, нужно спроектировать и описать каждый блок шаблона сайта. Задача не из лёгких, согласитесь? Да и к тому же, очень индивидуальная. Однако, большинство шаблонов и фреймворков уже итак неплохо отображаются на мобильных телефонах, за мелкими исключениями. Поэтому, скрыть или показать некоторую информацию для определенных экранных разрешений будет достаточно, чтобы сайт более-менее сносно отображался на разных типах экранов.
Как скрыть часть информации от мобильных устройств?
Как Вы уже поняли, в помощь нам приходит media screen в CSS, с помощью которого можно регулировать отображение структуры сайта в зависимости от разрешений экранов. Для начала, нам нужно заключить скрываемую информацию в дополнительный div-контейнер, назовём его hidemobile.
А после этого, добавить в style.css вашего сайта следующий фрагмент кода:
В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.
Как сделать информацию видимой только на мобильных устройствах?
Возможно, у вас есть какое-то целевое предложение или контент, предназначенный только для владельцев смартфонов. Или же вы банально хотите показывать мобильным посетителям принципиально другое содержание страницы. В любом из этих случаев, рассмотрим способ отображения контента только на маленьких разрешениях экрана.
Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.
А после добавим в style.css сайта этот фрагмент кода:
Удачной вёрстки!
Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.
Задача: прятать блок div на маленьких экранах (расширение ниже .hidden-phone , .hidden-tablet и т.д. Но они устарели и в новой версии бутстрапа не доступны.
Для скрытия элементов при различных расширениях нужно использовать следующие классы:
Мобильные устройства ( .visible-xs , .hidden-xs
Планшеты (768px — 992px) — .visible-sm , .hidden-sm
Десктопы (992px — 1200px) — .visible-md , .hidden-md
Большие экраны (>1200px) — .visible-lg , .hidden-lg
Пример сокрытия блока с картинкой на устройствах с маленьким экраном:
Здравствуйте, не могу сам понять как лучше скрыть блок на мобильных устройствах если в мета теге viewport для страницы указываю какое-то конкретное значение ширины сайта. Суть в том что этот блок должен показываться на страницах для дектопов и скрываться на мобильных. Viewport нельзя указать w > window.innerWidth возвращает ширину viewport.
Пример типа такого:
Я так понимаю, что медиазапрос просто не срабатывает т.к. ширина вьюпорта не уменьшается меньше 1100 пикселей. Есть ли другие варианты определить что пользователь зашел с мобильного устройства?