通过手机查看时隐藏网站的一部分

Question

在我的模板html中我想隐藏

标签中的一些内容给使用手机查看网站的用户。我们可以用javascript做到这一点吗？请指教，谢谢。

Answer 1

您可以使用media queries实现此目的。人们通常会这样做：

@media (max-width: 480px) {
    .hidden_mobile {
        display: none;
    }
}

使用上面的媒体查询，如果某个元素具有类hidden_mobile且屏幕尺寸小于480px - example here，则该元素将被隐藏。因此，您只需将此类添加到要隐藏在移动设备上的所有元素。

---

值得注意的是，如果您希望这可以在移动设备上运行，那么您应该设置一个视口。

<meta name="viewport" content="width=device-width, initial-scale=1">