Как показать контент только на мобильных устройствах
Бесплатные скрипты
Как показать контент только на мобильных устройствах
Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код контейнер внутри тэга <body> в том месте, где этот контент должен отображаться (контейнер — это конструкция в коде HTML, состоящая из открывающего и закрывающего тегов, например, <body> и </body>, <div> и </div>):
Здесь текст или изображение, которое будет видно только на мобильных устройствах.
</div>
Для тэга <div class="show-on-mobile"> прописываем в файле CSS свойства этого класса .show-on-mobile
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .show-on-mobile { display: inline; }}
Как скрыть контент только на мобильных устройствах
Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:
Здесь текст или изображение, которое не будет видно только на мобильных устройствах.
</div>
Затем необходимо прописать стили CSS в одноименном файле:
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .hide-on-mobile { display: none; }}
Внимание:Скачайте данную статью себе
Нет комментариев
Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.