非响应式主题子主题引入移动端样式后网页版故障求助

你遇到的核心问题很明确：当前代码没有做设备判断，移动端样式被全局加载，导致桌面端样式被覆盖、元素重叠。下面是具体的解决方案，分步骤帮你修复：

1. 基础方案：仅在移动设备加载移动端样式 #

WordPress自带wp_is_mobile()函数，可以判断当前访问设备是否为移动设备（包含手机、平板）。把移动端样式的入队逻辑放在这个条件里，就能避免桌面端加载冲突样式：

function custom_enqueue_styles() {
    // 先正常加载父主题和子主题样式，确保子主题样式优先级正确
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );

    // 仅在移动设备上加载移动端样式
    if ( wp_is_mobile() ) {
        wp_enqueue_style( 
            'mobile-style', 
            get_template_directory_uri() . '/mobile/style.css', 
            array( 'parent-style', 'child-style' ), // 设置依赖，让移动端样式最后加载，确保覆盖生效
            wp_get_theme()->get('Version') // 可选：添加版本号，避免缓存干扰
        );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles' );

2. 进阶方案：精确区分手机和平板（可选） #

如果你的需求是仅手机加载移动端样式，平板保留桌面版样式，wp_is_mobile()会把平板识别为移动设备，这时候可以自定义一个更精准的设备判断函数：

function is_exclusively_mobile() {
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    // 匹配手机UA，排除平板、电子书阅读器等大屏移动设备
    return preg_match( '/(android|iphone|ipod|blackberry|windows phone)/i', $user_agent ) 
           && !preg_match( '/(ipad|tablet|kindle|playbook)/i', $user_agent );
}

function custom_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );

    if ( is_exclusively_mobile() ) {
        wp_enqueue_style( 
            'mobile-style', 
            get_template_directory_uri() . '/mobile/style.css', 
            array( 'parent-style', 'child-style' )
        );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles' );

3. 额外注意事项 #

• 替换原有代码：把你当前单独的wp_enqueue_style( 'mobile-style', ... )替换成上面的完整函数，保证所有样式加载顺序正确。
• 清理缓存：修改代码后，记得清空WordPress后台缓存、浏览器缓存，避免旧样式残留。
• 优先级验证：通过array( 'parent-style', 'child-style' )设置依赖，能确保移动端样式在父主题、子主题样式之后加载，这样移动端的样式规则才能正确覆盖原有规则。

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