4

So most of the time my stylesheets appear properly. The standard/original one always works flawlessly, however it seems sometimes the mobile one is disregarded when looked at from a mobile device

I have them designated as follows:

<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />

I'm using a Droid X to view the page, in portrait mode, so the device width shouldn't be exceeding the max-width specified above, but sometimes, randomly, it still reverts back to the original css page.

Any way to keep it from doing so?

TylerH
  • 20,799
  • 66
  • 75
  • 101
DELETE THIS PROFILE
  • 63
  • 1
  • 5

4 Answers4

2

Make sure your standard.css isn't affecting the cascade of what you expect to see with the mobile.css. It looks as though a mobile device will load your standard.css first then the mobile.css - so styles in both stylesheets are affecting display. I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time.

Also, don't forget to include this meta tag to make sure your page is being scaled correctly to the device dimensions:

<meta name="viewport" content="width=device-width" />
Jim Amos
  • 289
  • 1
  • 4
  • _I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time._ <-- Please elaborate. How do you wrap them in logic? Do you use javascript or something? – DELETE THIS PROFILE Feb 28 '11 at 15:40
  • I think he's saying to add a condition to your first CSS Import, so that it doesn't get loaded too. Something to the nature of media="All (min-width:800)" might help the browser avoid loading the conflicting desktop version of the CSS along with the "mobile version". – NoAlias Feb 28 '11 at 19:04
0

Try using the media type "handheld".

<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
PCasagrande
  • 5,302
  • 3
  • 27
  • 36
  • 1
    Caveat to be aware of: iPhone does not support the media type handheld so this would not have the desired effect at least in iPhone. More info here: http://stackoverflow.com/questions/3893342/do-iphone-android-browsers-support-css-media-handheld – Jim Amos Feb 26 '11 at 19:08
  • @Jim - you're correct. Most of the newer touch screen devices don't support handheld very well, if at all. – DELETE THIS PROFILE Feb 28 '11 at 15:26
-1

Maybe use media="screen" for standard.css? Maybe it helps (:

Or check user-agent in server side. If it is mobile device loading only mobile css otherwise load standard.css.

I use WURFL to find out if it is mobile device...

Juris Malinens
  • 1,251
  • 1
  • 9
  • 13
-1

I've see that happen before. I believe it was the size of the body element that was getting changed. The correct doctype is important. It should be:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Knu
  • 14,806
  • 5
  • 56
  • 89
Jake H.
  • 155
  • 1
  • 3
  • Actually that WAP docType, though perfectly valid for some devices such as Blackberry - is not needed on iPhone/Android, which work perfectly well with the HTML5 doctype eg, just: – Jim Amos Feb 26 '11 at 19:05