Reputation: 842
Javascript newbie here.
I have an element called 'up_arrow" (picture of an up arrow). I want a script that shows the arrow on desktops but not on mobile devices. So I attempted to use the following script:
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test( navigator.userAgent )){
document.getElementById('up_arrow').style.visibility = 'hidden';
}
</script>
The up arrow image shows on my computer, but it also shows on my Android phone. Can someone please explain to me what error I made in my coding?
Thanks in advance!
EDIT: I have include the element 'up_arrow's code
<a href="#header-wrapper"><img id="up_arrow" class="uparrow" alt="uparrow" src="images/uparrow.png"></a>
Upvotes: 0
Views: 3387
Reputation: 579
You can use responsive design approach in your css stylesheet. For example:
#up_arrow {
visibility: hidden
}
@media screen and (min-width: 40.5em) {
#up_arrow {
visibility: visible
}
}
will hide the up_arrow on "small screen devices" (define the "mobile device" by screen size, not the user agent). For more details, see http://www.html5rocks.com/en/mobile/responsivedesign/
Upvotes: 1