Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile phone not recognizing media queries

So I have an interesting predicament, I' working on a responsive site, and when I resize my browser everything works as it should, but when I view the site from my iphone, it's not grabbing the queries from the appropriate media query, which I have defined as:

@media (max-width: 479px) {
  rules
}

The site is ericbrockmanwebsites.com/dev2 Wondering if anyone has come across this before.

Any help is greatly appreciated.

like image 785
Eric Brockman Avatar asked Mar 19 '13 05:03

Eric Brockman


People also ask

Why media query is not working in mobile?

Mobile Media Query Not Working If your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom. This tells the browser to render pages according to the width of the device. Adding it often does the trick for making mobile breakpoints work.

Why are my media queries not working?

Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.


1 Answers

You'll need to include <meta name="viewport" content="width=device-width, initial-scale=1"> in your head to get your mobile device to respect your media queries.

like image 185
jarmie Avatar answered Nov 09 '22 10:11

jarmie