Question

Javascript newbie here。

我有一个名为'up_arrow'的元素（向上箭头的图片）。我想要一个在桌面上显示箭头但不在移动设备上显示箭头的脚本。所以我尝试使用以下脚本：

<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test( navigator.userAgent )){
    document.getElementById('up_arrow').style.visibility = 'hidden';
}
</script>

向上箭头图像显示在我的电脑上，但它也显示在我的Android手机上。有人可以向我解释一下我在编码中犯了什么错误吗？

提前致谢！

修改：我已经包含元素'up_arrow的代码

<a href="#header-wrapper"><img id="up_arrow" class="uparrow" alt="uparrow" src="images/uparrow.png"></a>

Answer 1

您可以在css样式表中使用自适应设计方法。例如：

#up_arrow {
  visibility: hidden
}

@media screen and (min-width: 40.5em) {
  #up_arrow {
    visibility: visible 
  }
}

会将up_arrow隐藏在“小屏幕设备”上（按屏幕大小定义“移动设备”，而不是用户代理）。有关详细信息，请参阅http://www.html5rocks.com/en/mobile/responsivedesign/

Answer 2

您需要使用style.display =“none”而不是使用可见性

在移动设备上更改元素的CSS样式

2 个答案: