隐藏移动设备上的内容，CSS 和 HTML

Question

我正在修改我的 WordPress 主题，以便我可以在移动设备上更改 header 图片。我已经很接近了。我从主题的自定义中删除了 header 图像并安装了自定义 header 插件。

我将其添加到我的样式表中：

@media screen and (min-width: 800px) {
   #headerimagemobile { display:none; }
}

@media screen and (max-width: 800px) {
   #headerimagenotmobile { display:none; }
}

这是我的习惯 header:

<div id="headerimagemobile" align="center">
<img src="http://www.zordonsboy.com/wp-content/uploads/2015/02/Zordons-Boy-Site-Header-PNG-Retina-1.png" alt="Zordon's Boy Header">
</div>

<div id="headerimagenotmobile" align="center">
<img src="http://www.zordonsboy.com/wp-content/uploads/2015/01/Zordons-Boy-Site-Header-PNG-Retina.png" alt="Zordon's Boy Header" style="width:958px">
</div>

这是站点：http://www.zordonsboy.com

看起来它可以在桌面浏览器中运行。最大化时有一张图像，然后随着缩小 window 而切换。但是在手机上，我得到了两个图像。我从我的主题中得到了 800px，这是它用来在移动设备上响应的截止点。

知道我还需要做什么吗？

编辑：我投了反对票，这显然意味着我没有付出任何研究努力。在过去的四个小时里，我一直在研究这个问题，这就是我结束的地方。我找到了 javascript 和 jquery 结果，但我不知道如何将它们合并到 html 自定义 header.

Answer 1

我刚刚在桌面设备（也调整了 window 的大小）和移动设备（Chrome 移动浏览器）上检查了您的网站。在较小的屏幕上，它只显示一个标志！我相信您没有刷新浏览器缓存，旧的 css 文件可能会从缓存中提取，而不是您的更新版本！尝试清除手机的浏览器缓存。

因为几乎所有的浏览器都保留了缓存机制来加快下次加载网站的速度。大多数时候，图像、CSS 文件、Javascript 文件等将存储在缓存中。因此，当您进行更改时，请始终尝试在网页上进行硬刷新（如果您在桌面上，请按 Ctrl+F5）或尝试清除浏览器缓存，以便加载网站内容的新副本。

隐藏移动设备上的内容，CSS 和 HTML

Hide content on mobile, CSS and HTML

html

css

wordpress

mobile