Why Are CSS Media Queries Not Working in Responsive Viewer?
Fix common viewport issues where your website desktop layout is rendered instead of responsive mobile styles.
Step-by-Step Instructions
Check Your <head> Tag for the Viewport Meta Element
Modern mobile browsers and simulators require the standard viewport meta tag to correctly scale CSS pixels.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Verify CSS Breakpoints Against Device Viewport
Ensure your CSS media queries match the logical CSS viewport width of the device (not physical pixels). For example, an iPhone 16 Pro has a CSS width of 402px, even though its physical resolution is 1206px.
@media (max-width: 480px) {
/* Mobile styles applied here */
.container {
padding: 12px;
}
}Check for Conflicting "min-width" or Fixed Widths
Ensure wrapper elements do not have hardcoded `width: 1200px` or `min-width: 1024px` which prevent your page from shrinking to mobile dimensions.
- Always use `width=device-width, initial-scale=1.0` in your `<head>`.
- Check that no `X-Frame-Options` or Content Security Policy headers block iframe responsive scaling.
Frequently Asked Questions
What is the difference between CSS Viewport and Physical Resolution?
CSS Viewport is the layout dimension your CSS media queries target. Physical Resolution is the raw hardware pixels. Device Pixel Ratio (DPR) converts CSS pixels into physical pixels.
Download Responsive Viewer free from Google Chrome Web Store.