CSS for mobile sometimes reverts back to original
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="CustomStyleSheet开发者_Go百科s/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?
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" />
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" />
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...
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">
加载中,请稍侯......
精彩评论