Cheap tweaks for your web pages on handheld devices

[kpreid]

Got 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 , as I've just done across my site:

This tells iPhone and Android browsers, at least, to present the page with a virtual window width equal to the device's actual screen

Comments

[greyaenigma]

Cool thing to know about -- thanks!

Interesting, but...

[anonymous]

Since I just got an Android phone with a tiny screen (S-E x10 mini pro), I thought I'd try this out. Unfortunately, when I browse your blog, 50% of the real estate is taken up by the left column, containing links and ads, making the text very narrow. So in my case, I'd like to have the text be the width of the device, and scroll left when (if) I need to view the ads.

Maybe this is solvable using Media Queries?

-ketil

Re: Interesting, but...

[kpreid]

I haven't actually applied these techniques to my blog - LJ doesn't let me add a , and the layout is canned anyway. (I'm thinking about moving to hosting my own blog (so I can include JS content, not have ads, have my own true backups, etc.), but I haven't gotten around to investigating what to use for a backend.)

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; but that seems to severely strip down the markup of entries.)