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

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

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

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

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

Здесь текст или изображение, которое будет видно только на мобильных устройствах.

Для тэга прописываем в файле 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; >>

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

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

Здесь текст или изображение, которое не будет видно только на мобильных устройствах.

Затем необходимо прописать стили 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; >>

Подписаться:

Поделиться:

Как скрыть iframe для мобильных устройств? — Общие вопросы веб разработки

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

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

Здравствуйте, не могу сам понять как лучше скрыть блок на мобильных устройствах если в мета теге viewport для страницы указываю какое-то конкретное значение ширины сайта. Суть в том что этот блок должен показываться на страницах для дектопов и скрываться на мобильных. Viewport нельзя указать width=device-width т.к. часть страниц не адаптируется для мобильных и должна вмещаться на 100% ширины экрана мобильного устройства.
window.innerWidth возвращает ширину viewport.
Пример типа такого:

@media handheld, all and (max-width: 1023px) < .block < position: fixed; display: none; width: 50px; height: 50px; >>

Я так понимаю, что медиазапрос просто не срабатывает т.к. ширина вьюпорта не уменьшается меньше 1100 пикселей. Есть ли другие варианты определить что пользователь зашел с мобильного устройства?

Вопрос задан более трёх лет назад
9244 просмотра

Читать:

Как картинку сделать по центру в css

1 комментарий

Оценить 1 комментарий

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

Проблема в следующем: есть блок, который не нужно отображать на телефонах, планшетах. Как это сделать с помощью CSS?? Я понимаю, что вопрос может быть простейшим, но. Заранее благодарю.

Отслеживать
задан 15 сен 2015 в 11:59
119 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
hidden-xs добавь класс, если бутстрап юзаешь =)
15 сен 2015 в 12:41

@korolariya, К сожалению ваш вариант не сработал(ну или у меня руки кривые =)) Но, все равно, большое спасибо

15 сен 2015 в 13:59
15 сен 2015 в 14:13

Все бы хорошо, но стоит включить кэш, всем вашим кодам грош цена. По крайней мере в joomla. Включи системный кэш и удивись.

16 ноя 2021 в 13:14

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

@media screen and (max-width: 600px) < #chto_ne_pozavivat < visibility: hidden; display: none; >>

через js

 var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) < alert("Мобильное устройство!!"); $('.navWrap').css('display', 'none'); // или можно $('.navWrap').hide(); >else

Отслеживать
ответ дан 15 сен 2015 в 12:05
8,331 4 4 золотых знака 26 26 серебряных знаков 48 48 бронзовых знаков
Зачем одновременно visiblity и display?
15 сен 2015 в 12:06
а как-то в сам блок это все запихнуть можно. P.s. прошу извинить за глупые вопросы)
15 сен 2015 в 12:13
@Qwertiy кому что нужно выберет. не обязательно что бы оба были.
15 сен 2015 в 12:23
спасибо, попробую.
15 сен 2015 в 12:44
Огромное спасибо. все просто замечательно)
15 сен 2015 в 13:53

Используй media-запрос на ширину экрана.

Не используй вариант handheld — он устарел и на большинстве устройств не сработает.

Отслеживать
ответ дан 15 сен 2015 в 12:05
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков

.fixed1 < display: inline; >/* Smartphone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px)< .fixed1 < display: none; >>

Отслеживать
ответ дан 18 окт 2018 в 11:10
362 1 1 серебряный знак 16 16 бронзовых знаков

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.