html - 在移动设备上隐藏一个 div 不起作用

Question

我正在尝试创建一个类，我可以用它来隐藏移动版网站上的某些 div。我使用的 css 是

@media screen and (max-width: 720px) {.desktop-only { display: none !important; }}  

视口(viewport)设置为

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

然而，当我在分辨率低于 720 像素的设备上查看网站时，div 仍然可见。我似乎无法弄清楚为什么它不起作用。我错过了什么？我已经尝试了 Hide div on mobile devices, using CSS 中列出的所有建议但似乎无法弄清楚我做错了什么。

这里有一支笔来说明这个问题....将其调整到 720px 以下并且桌面专用 div 不会隐藏 http://codepen.io/anon/pen/vEjvbM

Answer 1

我可以看到它在工作。您可能忘记在 CodePen 中添加 CSS。

查看此更新版本:http://codepen.io/anon/pen/azGPxG

使用您提到的相同 CSS:

@media screen and (max-width: 720px) {.desktop-only { display: none !important; }}