0

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

8
  • 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
    May 9, 2012 at 2:29
  • What if you remove the "only" in front of "screen"? Does that help any?
    – kevin628
    May 9, 2012 at 2:31
  • Nope - that didn't work. I removed the word "only".
    – Doug Fir
    May 9, 2012 at 2:37
  • Try giving the first link tag a media type. e.g., media="screen".
    – kevin628
    May 9, 2012 at 2:41
  • Like this: media="screen and (max-device-width: 480px)"?
    – Doug Fir
    May 9, 2012 at 2:44

1 Answer 1

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.

1
  • 1
    <meta name="viewport" content="width=device-width, initial-scale=1">
    – j0aqu1n
    May 9, 2012 at 3:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.