Add viewport META to light format to better support WebKit-based mobile browsers

[wqoq]

Title
Add viewport META to light format to better support WebKit-based mobile browsers

Short, concise description of the idea
Add an HTML META tag to the header whenever ?format=light is specified so people viewing entries on WebKit-based mobile browsers get a more friendly look.

Full description of the idea
I'll use my iPhone as an example, but I'm curious to hear from other people also using WebKit-based mobile browsers (i.e. Google Android), if they experience the same thing.

Anytime I view an entry with format=light, I get the plain jane version with all the fancy formatting thrown away. That's great, but what ends up happening is Mobile Safari tries to do The Right Thing™ when a page isn't specifically designed for a mobile device, and displays the full content just as you would if you were browsing the same page from your desktop.

Normally this is great, because the majority of pages it comes across that aren't designed for a mobile device, aren't designed for a mobile device for a reason. Setting format=light actually confuses Mobile Safari in a way, and you end up with something not desirable at all.

Normally, when Mobile Safari does The Right Thing™, you can double-tap the div tag with the actual content, and it dynamically zooms in to just display that area across the width of the screen. However, with format=light, what you get is really tiny print across the *entire width of the device* by default, so you can't double tap to zoom in anymore. You can manually "reverse-pinch" (what is the opposite of pinch anyway?) to zoom in, but then you end up having to pan left and right with your finger, and then again, and repeat, for *every* line in a paragraph.

Great if you want to burn a few extra calories and give your finger a workout; not so great if you just want to read the damn thing in peace.

Ironically, Mobile Safari does a much better job of viewing LJ in the non-light version, because you can at least do the double-tap to zoom in.

Luckily, there's a really easy fix, and it's just one line of HTML.

You just put:

[meta name="viewport" content="width=device-width"]

inside the HEAD (kinda like what's already being done for IE7 compatibility it seems) and that's it! You're done. (Forgive the use of the square brackets; I didn't know if this was going to get reformatted or not.)

I've tried it on a local copy of an entry I grabbed from the LJ news feed, and I've posted before and after shots here to demonstrate (my apologies in advance if it's not proper netiquette to post external links):

http://childprogidy.com/pics/lj/lj_mobile-no_viewport.png
http://childprogidy.com/pics/lj/lj_mobile-with_viewport.png

If width=device-width is a little too far zoomed in, I tried it with a few other widths, and found width=640 to be a pretty happy medium (though I'm kinda partial myself to not hard-coding explicit values).

This goes in to a little more depth explaining the tech side of it:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_5.html
An ordered list of benefits

• It's quick
• It's easy
• It's simple
• It works
• It won't break anything
• You'll get a whole community of people to suddenly love you
• It's one more excuse to put off building a real mobile version... ;)

An ordered list of problems/issues involved

• There might actually be people out there that like panning back and forth all day, reading a few words at a time, from a really long paragraph.
• There might actually be people out there that can read 3pt font.