Как скрыть элемент (текст, картинку) на мобильных устройствах 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 те элементы которые нужно сркыть.
На этом все, но если у вас остались вопросы или пожелания — напишите в комментариях, попробую вам помочь.
