Как скрыть элемент (текст, картинку) на мобильных устройствах Javascript

Andrey | 10.10.2017 | Вебмастеру (CMS, PHP, SEO) | Комментариев нет

Иногда, на мобильной версии сайта надо скрыть тот или иной элемент. Способов это сделать ну очень много. В этой статье мы рассмотрим способ с использованием Javascript. Можно, в принципе взять большую часть кода со статьи Переадресация мобильных устройств на другую страницу (LP, сайт) и совсем чуть чуть ее доработать, но со времени написания той статьи придумал более изящный метод. Поэтому код значительно сократился и стал выглядеть так:

<script language="javascript" type="text/javascript">
 
 var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
 
    } 
    else 
    { 
 
document.write("текст который надо скрыть" );}
</script>

Так же есть второй способ, который с одной стороны немного проще, а с другой немного тяжелее. Итак, в конце, после закрывающего тега html вставляем следующий код:

<script language="javascript" type="text/javascript"><!--
 
 var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { document.getElementsByClassName('HiddenOnMobile')[0].style.display = "none";
 
    } 
    else 
    { 
}
</script>

А необходимый элемент, который надо скрыть просто заключем в тег div. К примеру

1	<div HiddenOnMobile">Перепрошивка</div>

Преимущество этого способа перед первым, заключается в том что первый хорош если вам надо скрыть всего 1-2 элемента на странице, а второй если таких элементов много. В этом случае внизу страницы вы прописываете:

<script language="javascript" type="text/javascript"><!--
 
 var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { document.getElementsByClassName('HiddenOnMobile')[0].style.display = "none"; document.getElementsByClassName('HiddenOnMobile1')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile2')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile3')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile4')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile5')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile6')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile7')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile8')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile9')[0].style.display = "none";document.getElementsByClassName('HiddenOnMobile10')[0].style.display = "none";         
    } 
    else 
    { 
}
</script>

и заключаете в div HiddenOnMobile, HiddenOnMobile1, … HiddenOnMobile10 те элементы которые нужно сркыть.

На этом все, но если у вас остались вопросы или пожелания — напишите в комментариях, попробую вам помочь.

Об авторе

Andrey

Администратор блога. Специалист по маркетингу, развитию бизнеса, здоровому образу жизни. Владелец и директор двух компаний в Украине. Сертифицированный специалист Apple. Увлечения: бизнес, спорт, дайвинг.

Похожие записи

Об авторе

Andrey

Добавить комментарий