Viber, Telegram
+38 066 7342127
Call me
+372 55916393

ПОКАЗАТЬ ИЛИ СКРЫТЬ КОНТЕНТ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

Січ 16, 2019 Блог
ПОКАЗАТЬ ИЛИ СКРЫТЬ КОНТЕНТ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

Как показать контент только на мобильных устройствах или как спрятать контент для мобильных устройств.

Как показать:

Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код внутри тэга-контейнера <body> в том месте, где этот контент должен отображаться

<div class="show-on-mobile">
Здесь текст или изображение.
</div>

Для тэга <div> ниже прописан CSS-класс show-on-mobile. Все свойства этого класса пишутся в отдельном коде и добавляется перед </head> или в отдельный CSS-файл (во втором случае нужно использовать код без контейнера <style type=”text/css>…</style>)

<style type="text/css">
.show-on-mobile { display: none; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .show-on-mobile { display: inline; }}
</style>

Как скрыть:

Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:

<div class="hide-on-mobile">
Здесь текст или изображение.
</div>

Затем необходимо прописать стили CSS в контейнере <head> или в отдельном CSS-файле (без контейнера <style>):

<style type="text/css">
.hide-on-mobile { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .hide-on-mobile { display: none; }}
</style>

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *