OceanWP免费WordPress主题移动端页眉背景图隐藏失败求助

看起来你已经找对了方向，但可能被几个常见的坑卡住了，我来帮你逐一排查：

1. CSS优先级不足，被主题样式覆盖 #

OceanWP的主题样式可能用了比#site-header更具体的选择器（比如带额外类名的#site-header.header-style-default），导致你的代码被覆盖。你可以先试试给规则加!important强制生效：

@media only screen and (max-width: 959px) {
    #site-header {
        background-image: none !important;
    }
}

如果生效了，建议再用浏览器开发者工具（按F12切换到移动端视图）查看页眉元素的实际类名，替换成更精准的选择器（比如.oceanwp-site-header），尽量避免依赖!important。

2. 直接修改主题核心样式表的风险 #

你修改了主题的样式表和压缩版，但主题更新会直接覆盖这些修改，而且可能存在加载顺序问题（比如压缩样式在你修改的非压缩样式之后加载）。正确的做法是用WordPress自带的自定义CSS功能：

• 进入后台 → 外观 → 自定义 → 额外CSS，把你的媒体查询代码粘贴到这里。这里的样式会自动加载在主题样式之后，优先级更高，还不会被主题更新清空。

3. 缓存未清空导致旧样式残留 #

如果你的网站开启了缓存插件（比如WP Rocket、W3 Total Cache）或者服务器缓存，修改样式后缓存没更新，移动端还是会加载旧的样式文件。解决步骤：

• 清空缓存插件的缓存；
• 如果是服务器端缓存，联系主机商帮忙清除；
• 用移动端的无痕模式测试，避免浏览器本地缓存干扰。

4. 媒体查询的断点不匹配 #

OceanWP的默认响应式断点可能不是959px，比如有些版本用1024px作为平板的分界点。你可以尝试扩大断点范围，确保覆盖平板和手机：

@media only screen and (max-width: 1024px) {
    #site-header {
        background-image: none;
    }
}

备用方案：用PHP代码判断设备 #

如果CSS方法始终不生效，可以试试在子主题的functions.php里添加这段代码，通过PHP判断移动设备后注入样式：

add_action('wp_head', 'hide_mobile_header_background');
function hide_mobile_header_background() {
    if (wp_is_mobile()) {
        echo '<style>#site-header { background-image: none !important; }</style>';
    }
}

注意：wp_is_mobile()会识别所有移动设备（包括平板），如果需要更精准的尺寸控制，还是CSS媒体查询更靠谱。

内容的提问来源于stack exchange，提问作者Mads Christoffersen