Question

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

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

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

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

这是我的自定义标题：

<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

它看起来像是在桌面浏览器中运行。最大化时会有一个图像，然后在缩小窗口时切换。但在移动设备上，我得到了两张图片。我的主题是800px，它是用来在移动设备上响应的截止值。

有什么线索我还要做什么？

编辑：我投了一票，这显然意味着我没有付出任何努力。我在过去的四个小时里一直在研究这个问题，而这正是我最终的结果。我找到了javascript和jquery结果，但我无法弄清楚如何将它们合并到html自定义标题中。

Answer 1

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

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

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

1 个答案: