CODEWITHSUNDEEP
javascriptmedia-queries
Doug Fir
Doug Fir

Reputation: 21322

CSS media query not working

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

Upvotes: 0

Views: 1269

Answers (1)

j0aqu1n
j0aqu1n

Reputation: 1021

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.

Upvotes: 1

Related Questions