0

Javascript新手在这里。

我有一个名为“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>
4

2 回答 2

1

您可以在 CSS 样式表中使用响应式设计方法。例如：

#up_arrow {
  visibility: hidden
}

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

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

于 2013-03-03T19:55:52.757 回答
0

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

于 2013-03-03T19:59:12.770 回答