如何取消Divi Theme移动端响应式？求WordPress纯桌面端主题及解决方案

Hey there, let's work through these two desktop-only WordPress theme issues step by step—they're trickier than they look, but I've got you covered!

Divi has responsive design baked right into its core, so there's no one-click switch to disable it. Here are the most reliable methods to lock it into desktop-only mode:

Method 1: Deregister Divi's Responsive Styles via Child Theme #

Divi loads dedicated responsive stylesheets by default. You can disable these by adding code to your child theme's functions.php file (never edit the parent Divi files directly—updates will wipe your changes):

function disable_divi_responsive_styles() {
    // Remove Divi's built-in responsive stylesheets
    wp_deregister_style( 'divi-responsive' );
    wp_deregister_style( 'divi-style' );
    
    // Re-enable the main Divi style without responsive components
    wp_register_style( 'divi-style', get_template_directory_uri() . '/style.css', array(), ET_BUILD_VERSION, 'all' );
    wp_enqueue_style( 'divi-style' );
}
add_action( 'wp_enqueue_scripts', 'disable_divi_responsive_styles', 20 );

Method 2: Force Fixed Desktop Layout with Custom CSS #

If deregistering styles doesn't fully work, override all responsive behavior with custom CSS (add this in Divi > Theme Options > Custom CSS or your child theme's style.css):

// Lock all elements to desktop width, ignore screen size
@media only screen and (max-width: 980px), only screen and (max-width: 767px), only screen and (max-width: 479px) {
    #page-container, .container, .et_pb_row, .et_pb_column, .et_pb_module {
        width: 100% !important;
        max-width: 1200px !important; /* Adjust to your preferred desktop width */
        margin: 0 auto !important;
        float: none !important;
        clear: none !important;
    }
    // Hide mobile menu and restore desktop menu
    .et_mobile_menu { display: none !important; }
    .et_pb_menu__menu { display: block !important; }
    // Prevent columns from stacking on small screens
    .et_pb_column { width: auto !important; }
}

This will force every element to stay at your chosen desktop width, no matter how small the screen gets.

If deleting the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag didn't fix things, here's what to investigate:

• Duplicate viewport tags: Plugins (caching, SEO, or page builders) often inject their own viewport tags. Use your browser's dev tools (right-click > Inspect) to search for <meta name="viewport"> in the page source—if there's more than one, track down which plugin is adding it and disable that feature.
• Hidden viewport tags in theme files: Some themes include the viewport tag in multiple places (like header.php, template parts, or even footer.php). Double-check all your theme's template files to ensure you didn't miss one.
• Unremoved CSS media queries: The viewport tag controls how browsers scale the page, but responsive layouts are driven by CSS @media rules. Even without the viewport tag, if your theme's CSS still has rules for smaller screens, those will still apply. You can either:
  • Delete all media queries from your theme's CSS (use a child theme to override parent files)
  • Add overriding CSS like the code shared for Divi above
• Browser caching: Your browser might be serving a cached version of the page with the old viewport tag. Clear your cache, or test in incognito mode to rule this out.

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