Печать
Категория: Joomla & Virtuemart
Просмотров: 66

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

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

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

Для тэга <div class="show-on-mobile"> прописываем в файле CSS свойства этого класса .show-on-mobile

 

1
2
3
4
5
.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; }}

 

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

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


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

Затем необходимо прописать стили CSS в одноименном файле:

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


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

Затем необходимо прописать стили CSS в одноименном файле:

 

1
2
3
4
5
.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; }}