简体   繁体   中英

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM