如何在某些平台上隐藏div ?

Question

好的，所以我试图使div有属性隐藏时，在手机上，但不是在其他平台上，想知道如何做到这一点?

<div id="content-desktop">
<button onclick="ChangeDefault()">switch theme to default</button>
<button onclick="ChangeOrigin()">switch theme to origin</button>
<button onclick="ChangeDark()">switch theme to dark</button>
<button onclick="ChangeLight()">switch theme to light</button>
</div>

Answer 1

您可能希望根据屏幕宽度显示/隐藏选定元素。

这样，您可以检测设备显示是否足够大，以满足您的"桌面"，而不是根据设备类型来确定它。(考虑一下13"iPad;它的屏幕比一些笔记本电脑大，但仍然可以被认为是"手机"。

你可以这样使用CSS断点:

.hideOnMobile {
visibility: hidden;
}
@media only screen (min-width: 900px) {
// this CSS will only be applied if the screen is wider than 899px
.hideOnMobile {
visibility: visible;
}
}

如果您真的想要检测浏览器是否在移动设备上，您可以检查navigator.userAgent对象以获取浏览器的User Agent字符串。由于没有编写User Agent字符串的标准方法，您可能需要收集想要响应的User Agent列表，或者使用已经包含了一些常见用户代理的库。