Блог веб-студии ANARA
На память
Автор Олег Сафонов —

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

Как сделать так, что бы контент или определенное содержимое страницы сайта при разработке, было видно только пользователям мобильных устройств или наоборот, только на компьютерах. Хороший способ показать что либо мобильным посетителям в отличие от постоянных посетителей, обычной версии сайта.

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

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

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

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

.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 в одноименном файле:

.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; }}