Why Doesn\'t My Media Query Work on Browsers, But Works on Mobile Devices?

Media Query: Tailoring Styles for Specific Device Resolutions

The @media min-width & max-width properties provide granular control over styles based on device resolution. However, a common issue arises when using this setup: it works on mobile devices but not in browsers.

Cause of the Issue

The issue stems from the existence of a meta tag specifying viewport width and user scalability. By using this meta tag, you're effectively overriding the device's default settings. Therefore, the @media rules based on device dimensions become inaccurate.

Solution: Reordering Styles

The solution is to rearrange the CSS to prioritize default styles for older browsers that don't support @media. Then, use @media rules to apply specific styles for different device resolutions. Here's a recommended approach:

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

Additional Considerations

• iPad screens are typically larger than iPhones, so you may need separate @media rules for them.
• You can use the @media print{} property to specify styles for printable versions of your content.
• Always test your styles thoroughly across various devices and browsers to ensure they render correctly.

The above is the detailed content of Why Doesn\'t My Media Query Work on Browsers, But Works on Mobile Devices?. For more information, please follow other related articles on the PHP Chinese website!