Как сделать так, что бы контент или определенное содержимое страницы сайта, было видно только пользователям мобильных устройств или наоборот, только на компьютерах. Хороший способ показать что либо мобильным посетителям в отличие от постоянных посетителей, обычной версии сайта.
Как показать контент только на мобильных устройствах
Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код контейнер внутри тэга <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; }}