Cheap tweaks for your web pages on handheld devices
Monday, September 20th, 2010 19:55![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
kpreidGot a nice fluid layout on your web site? Annoyed at how mobile browsers like to assume pages need nine hundred virtual horizontal pixels to display properly? Add this to your <head>, as I've just done across my site:
<meta name="viewport" content="width=device-width">
This tells iPhone and Android browsers, at least, to present the page with a virtual window width equal to the device's actual screen width. It was invented and specified by Apple.
(I am not taking up the question of whether these browsers are making the right default choice. I will say, however, that in my technical opinion this is the wrong choice of location for this parameter: whether a layout will work at narrow widths depends largely on the stylesheet, not on the HTML; this parameter therefore ought to be stored in the stylesheet (that is, be a CSS extension); insofar as it does depend on the HTML, you can then put it in a <style> element.)
If you're looking to use media types to provide different styles: These browsers also don't respect the “handheld” media type; but they do support draft CSS3 Media Queries, which allow you to condition on the actual screen width — if you want, even in ems! I've used this on the main switchb.org page to make the Big Text less likely to spill off the screen (could use some further testing; all I've used so far is my desktop and a Nexus One), and also in the Caja Corkboard demo (which I wrote this summer (among other things) and ought to blog about).
(no subject)
Date: 2010-09-21 04:35 (UTC)Interesting, but...
Date: 2010-09-21 07:11 (UTC)Maybe this is solvable using Media Queries?
-ketil
Re: Interesting, but...
Date: 2010-09-21 10:16 (UTC)I can't quite imagine how the Android browser would produce the effect you're describing, though; either it's in 'overview' mode and gives a desktop-like width or it's zoomed in to a single text column. Could you provide a screenshot?
(On the other hand, you could use LiveJournal Mobile (http://m.livejournal.com/read/user/kpreid/); but that seems to severely strip down the markup of entries.)