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

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

1
2
3
4
5
6
7
8
9
10
11
<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 вставляем следующий код:

1
2
3
4
5
6
7
8
9
10
<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 элемента на странице, а второй если таких элементов много. В этом случае внизу страницы вы прописываете:

1
2
3
4
5
6
7
8
9
<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 те элементы которые нужно сркыть.

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

загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *