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

这里是Javascript新手

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

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

if（/Android | webOS | iPhone | iPad | iPod | BlackBerry/i.test（navigator.userAgent））{
document.getElementById（'up_arrow'）。style.visibility='hidden'；
}

向上箭头的图像显示在我的电脑上，但它也显示在我的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 
  }
}

将隐藏“小屏幕设备”上的向上箭头（按屏幕大小而不是用户代理定义“移动设备”）。

---

有关更多详细信息，请参见您需要使用style.display=“none”而不是visibility

将元素“称为”

up\u arrow

意味着什么？脚本、头部或身体放在哪里？@ExplosionPills-我认为OP意味着

标记具有属性

id=“up\u arrow”“

@TedHopp我只想确定它是什么，因为如果不是

ID

的话，他的元素选择器就不工作了，控制台说什么？有错误吗？我想到的另一件事是：一些浏览器（也有一些doctype？没关系…）要求JavaScript标记具有

type

属性。尝试将脚本的开始标记更改为

。不确定，但可能值得一试。这取决于<代码>显示：无将使元素脱离浮动，而

可见性：隐藏

仅使其完全不可见（如

不透明度：0

即可）。