Tuesday, September 21, 2004
CSS for ill-behaved handheld devices
My PCS phone's browser is either over-confident or just plain ignorant. Either thinks that it is a "screen" browser rather than a handheld device, or it is totally unaware of media types at all. In any case, it tries to interpret all CSS rules, even those explicitly set off inside "@media screen" blocks. It foolishly obeys CSS positioning, even when this results in things being positioned off of the right edge of the screen in no-man's land. And it really is no-man's land, because there is no horizontal scrolling.
Today the way to deal with devices like this finally hit me like a ton of bricks: import a "@media handheld" stylesheet after the "screen" stylesheet. Correctly behaving graphical browsers will ignore this stylesheet. Correctly behaving handhelds will see it and use. The beauty is, ill-behaved handhelds like mine will use it to! Just use this stylesheet to explicitly override all those positioning rules that the phone shouldn't have seen anyway.
Today the way to deal with devices like this finally hit me like a ton of bricks: import a "@media handheld" stylesheet after the "screen" stylesheet. Correctly behaving graphical browsers will ignore this stylesheet. Correctly behaving handhelds will see it and use. The beauty is, ill-behaved handhelds like mine will use it to! Just use this stylesheet to explicitly override all those positioning rules that the phone shouldn't have seen anyway.
Viola! No more positioning!
@media handheld {
#container { position: static; }
#sidebar { position: static; }
#main { position: static; }
}
