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

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

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

<div>
Здесь текст или изображение.
</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>
Здесь текст или изображение.
</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>


Поделиться:

У вас нет прав для отправки комментариев. Войти используя свою социальную сеть