View Source for Safari on iPhone
A lot of web development knowledge has been gleaned by viewing source. Unfortunately the iPhone’s version of Safari doesn’t have a View Source command. So if you visit a site on the iPhone, and find that they’re serving you up a different, iPhone-optimized version of the site, there’s no easy way to look at the source and see what they’re doing.
To work around this problem, I made myself a little View Source bookmarklet that works on the iPhone. Here it is:
To use, add the above bookmarklet to your Safari or IE bookmarks, and sync your iPhone. Then visit a web page on your iPhone, pull up your bookmarks and select “View Source”. A new page will open containing the source of the page you were viewing.
Unlike the traditional View Source command, this bookmarklet shows the generated source, not the original source. if the DOM has been modified by script you’ll see the modified version and not the original. Also, you’ll probably have to do lots of zooming and panning, since the lines of source code will be wide. If anybody wants to make a version that has nicer formatting, feel free to expand this code.
Here’s the original un-escaped javascript:
var sourceWindow = window.open('about:blank');
var newDoc = sourceWindow.document;
newDoc.open();
newDoc.write('<html><head>' +
'<title>Source of ' + document.location.href + '</title>' +
'</head><body></body></html>');
newDoc.close();
var pre = newDoc.body.appendChild(newDoc.createElement("pre"));
pre.appendChild(newDoc.createTextNode(
document.documentElement.innerHTML));
Very useful — the only thing I’d suggest is the addition of meta viewport tags to define a better reading size. There is a lot of discussion about the best choices in http://www.iPhoneWebDev.com in a number of threads including http://groups.google.com/group/iphonewebdev/browse_thread/thread/f43493a828dffdb3, but I’d probably suggest for you:
This I’ve found tends to be one of the best choices for simple web pages that works in both portrait and landscape.
Comment by Christopher Allen — July 2, 2007 @ 10:20 pm
Grr, the blog software edited out the recommend meta viewport tag. It is:
meta name = “viewport” id = “viewport” content = “maximum-scale=0.6667; width=480″
Comment by Christopher Allen — July 2, 2007 @ 10:21 pm
ｉＰｈｏｎｅ 全米一斉発売…
ｉＰｈｏｎｅは日本で発売されるのでしょうか？アップルコンピューター…
Trackback by ワンセグ携帯 — July 3, 2007 @ 7:18 am
Use FireFox, go to about:config, and set the
general.useragent.override
value =
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Close and reopen it, and viola, there’s your view source.
Comment by Aaron — July 5, 2007 @ 11:43 am