CSS媒体查询不起作用

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

Answer 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.