CSS media query not working

Question

When checking my site on a mobile device (iPhone) it is clear that it is still loading the non mobile stylesheet. Here is the code in the header, can someone tell me whats wrong?

<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script src="js/onclick.js" type="text/javascript"></script>


<script>

if (screen && screen.width > 480)
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>');

</script>

Any reason why this is not using the "styles_mobile.css" as is intended?

In any response please be aware that I have limited knowledge of javascript

The issue is that on my mobile browser is using the styles.css sheet, not the styles_mobile.css sheet. I thought that I had set up code to: 1. Detect mobile and use a specified css sheet in that case (the css media query) 2. In the event of mobile do not run JS — Doug Fir
– Doug Fir, Commented May 9, 2012 at 2:29
What if you remove the "only" in front of "screen"? Does that help any? — kevin628
– kevin628, Commented May 9, 2012 at 2:31
Try giving the first link tag a media type. e.g., media="screen". — kevin628
– kevin628, Commented May 9, 2012 at 2:41

j0aqu1n · Accepted Answer · 2012-05-09 03:06:24Z

1

I think it needs a meta viewport tag:

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

This means use the device width, not the width that the browser in the device reports, which is bigger.

Technically, to do media queries by the book you need to add a "media" attribute to the element, or add @media entries to your CSS.

answered May 9, 2012 at 3:06

j0aqu1n

1,0217 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j0aqu1n Over a year ago

Collectives™ on Stack Overflow

CSS media query not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related