Bootstrap 4自定义@media查询在Firefox、IE失效，求排查原因

开发者阿泽

2026-5-26

Fixing Your Media Query for Firefox & IE

Hey there! Let's break down why your mobile media query works in Chrome/Safari but not in Firefox or IE, and how to fix it.

The Root Problem

Your current media query includes a WebKit-specific condition: (-webkit-min-device-pixel-ratio:0). Browsers that don't use the WebKit engine (like Firefox's Gecko or IE's Trident) don't recognize this prefix-based condition. When a browser encounters an unrecognized media feature in an and chain, it ignores the entire media query—this is exactly why Firefox and IE are skipping your mobile styles.

The Fix

You have two straightforward options to make this work across all browsers:

Option 1: Split the Query (Cleanest Approach)

Separate the WebKit-specific part into its own media query, and keep a generic version for other browsers. Both will apply the same styles:

/* For WebKit browsers (Chrome, Safari) */
@media only screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:0) and (orientation: portrait) {
  /* Your mobile portrait styles here */
}

/* For Firefox, IE, and other non-WebKit browsers */
@media only screen and (max-width:768px) and (orientation: portrait) {
  /* Same mobile portrait styles here */
}

Option 2: Combine with a Comma (Logical OR)

If you prefer to keep it in one block, use a comma to create a logical OR between the two query variants. Non-WebKit browsers will ignore the WebKit-specific line but match the generic one:

@media only screen and (max-width:768px) and (orientation: portrait),
       only screen and (max-width:768px) and (-webkit-min-device-pixel-ratio:0) and (orientation: portrait) {
  /* Your mobile portrait styles here */
}

Bonus: Do You Even Need the WebKit Condition?

If you added (-webkit-min-device-pixel-ratio:0) just as a "catch-all" for WebKit, you might not need it at all. Try removing it entirely—this simplified query will work across all modern browsers (including IE11+, which supports standard media queries):

@media only screen and (max-width:768px) and (orientation: portrait) {
  /* Your mobile portrait styles here */
}

Quick Pre-Test Checks

Before testing the fix, make sure to:

Force-refresh your browser (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) to clear any cached CSS files.
Verify that mobile.css is being loaded correctly in Firefox/IE (check the browser's dev tools > Network tab).

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