WordPress媒体查询完全无效，请求技术排查与解决建议

Let’s break down the issues step by step to get those media queries functioning correctly:

1. Fix the Incomplete Viewport Meta Tag #

Your current viewport tag is cut off and missing critical attributes that mobile browsers need to respect media queries. Mobile devices use this tag to determine how to scale and render the page—without the right values, your media queries won’t trigger as expected. Replace your existing tag with the full, correct version:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width tells the browser to match the screen’s native width, and initial-scale=1.0 ensures no default zoom is applied—both are non-negotiable for media queries to work on mobile.

2. Correct the Media Query Syntax #

Your CSS has invalid syntax that’s causing the browser to ignore the entire media block. Here’s what’s wrong:

• Missing parentheses around the max-width condition
• Using max-width(700) instead of (max-width: 700px) (note the colon instead of equals sign, plus the required px unit)

Replace your media query with this properly formatted version:

@media only screen and (max-width: 700px) {
    body {
        background-color: black !important;
    }
}

Even tiny syntax errors like these will break the entire media rule, so always double-check your condition formatting.

3. Clear All Caches #

Caching is a common culprit for not seeing CSS changes immediately. WordPress caching plugins (like WP Rocket, W3 Total Cache) or your browser’s local cache might still serve the old version of your style.css. Do both of these:

• Clear your WordPress plugin cache (look for a "Clear Cache" button in your caching plugin’s settings)
• Hard-refresh your browser (press Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) to bypass stored browser cache.

4. Verify Your Stylesheet Is Loading Correctly #

Sometimes the issue is that your updated style.css isn’t even being loaded by the browser. To confirm:

1. Right-click your page and select "Inspect" to open developer tools
2. Go to the "Sources" tab and locate your theme’s style.css file
3. Open it and check that your corrected media query is present at the end

If the query isn’t there, double-check that your theme is properly enqueuing the stylesheet (best practice is using wp_enqueue_style() in your functions.php file) or that the link in header.php points to the correct file path.

Content of the question originates from Stack Exchange, question author user6647072