After considerable experimentation, I settled on the best mix of cleanliness and features for serving a mobile stylesheet to iPhones, Android phones, and other small-screen devices, and a full stylesheet to desktop browsers being the following:
Set this for the full stylesheet:
and this for the mobile one:
... then provide a javascript button to allow the user to override that decision and enable/disable between them to get the preferred one.
I used min-device-width: 6in because that catches most android devices with resolutions higher than 480px. (Though after experimenting, Android unfortunately isn't even close to accurate on pixel density with the high-res screens, using about 100ppi always--the Eris, for example, thinks it has a 5" screen. Rather disappointing.)
This works nearly perfectly; FF, IE8 and Safari 3 or greater, iPad all get the full sheet, iPhone and most Android devices get the mobile one, the "only" at the beginning of the mobile media declaration prevents most older browsers from touching it, and anybody can switch cleanly between them.
Except that, it turns out, Safari 2.0 or older will NOT load stylesheets for media commands with an "and" in them, even if there isn't an "only" at the beginning. Since older Safaris can handle the CSS just fine, I don't want to force them to manually select a stylesheet, but I can't see any decent way to get around my problem without either:
A) Including an antistyle sheet as part of the mobile style, which is a pain and a mess,
or
B) Using a Javascript browser detector to enable the desktop sheet automatically.
And if I'm using a JS select anyway, I'm back to browser sniffing, which is a can of worms I really hate to open.
Is there anything I'm missing here, or am I out of luck on this?
The test site, if anybody wanted to see the specific implementation, is:
http://tinderbox.animeworld.com/reviews/
An unrelated aside, after realizing that IE6 has dropped below 5% of my pageviews and is decreasing rapidly, I decided it was more efficient to just say "screw it" and feed it a minimal stylesheet. The first significant site I've done that with--SO liberating.
Set this for the full stylesheet:
Code:
media="screen and (min-device-width: 6in), projection"
Code:
media="only screen and (max-device-width: 6in), handheld"I used min-device-width: 6in because that catches most android devices with resolutions higher than 480px. (Though after experimenting, Android unfortunately isn't even close to accurate on pixel density with the high-res screens, using about 100ppi always--the Eris, for example, thinks it has a 5" screen. Rather disappointing.)
This works nearly perfectly; FF, IE8 and Safari 3 or greater, iPad all get the full sheet, iPhone and most Android devices get the mobile one, the "only" at the beginning of the mobile media declaration prevents most older browsers from touching it, and anybody can switch cleanly between them.
Except that, it turns out, Safari 2.0 or older will NOT load stylesheets for media commands with an "and" in them, even if there isn't an "only" at the beginning. Since older Safaris can handle the CSS just fine, I don't want to force them to manually select a stylesheet, but I can't see any decent way to get around my problem without either:
A) Including an antistyle sheet as part of the mobile style, which is a pain and a mess,
or
B) Using a Javascript browser detector to enable the desktop sheet automatically.
And if I'm using a JS select anyway, I'm back to browser sniffing, which is a can of worms I really hate to open.
Is there anything I'm missing here, or am I out of luck on this?
The test site, if anybody wanted to see the specific implementation, is:
http://tinderbox.animeworld.com/reviews/
An unrelated aside, after realizing that IE6 has dropped below 5% of my pageviews and is decreasing rapidly, I decided it was more efficient to just say "screw it" and feed it a minimal stylesheet. The first significant site I've done that with--SO liberating.