这里是 JavaScript 新手。
我有一个名为“up_arrow”的元素(向上箭头的图片)。我想要一个在桌面上显示箭头但在移动设备上不显示箭头的脚本。所以我尝试使用以下脚本:
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test( navigator.userAgent )){
document.getElementById('up_arrow').style.visibility = 'hidden';
}
</script>
向上箭头图像显示在我的电脑上，但它也显示在我的 Android 手机上。有人可以向我解释我在编码中犯了什么错误吗？
提前致谢!
编辑: 我已经包含元素“向上箭头的代码”
<a href="#header-wrapper"><img id="up_arrow" class="uparrow" alt="uparrow" src="images/uparrow.png"></a>
最佳答案
您可以在 CSS 样式表中使用响应式设计方法。例如:
#up_arrow {
visibility: hidden
}
@media screen and (min-width: 40.5em) {
#up_arrow {
visibility: visible
}
}
将隐藏“小屏幕设备”上的向上箭头(按屏幕尺寸定义“移动设备”，而不是用户代理)。 有关详细信息，请参阅 http://www.html5rocks.com/en/mobile/responsivedesign/
关于javascript - 在移动设备上更改元素的 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15189259/