This blog has moved!

If you are not automatically redirected to the new address, please direct your browser to
http://www.juxtaservices.com/blog/
and update your bookmarks.

Friday, November 09, 2007

iPhone, uPhone, wwwe all Phone



Well truth is, I don't have an iPhone, but I have friends that do. Yay for me! I happen to have a certain ongoing 4.5 year vendetta/boycott against AT&T for a long string of indifferent offenses against me long ago. I know it sounds like a family feud or something, but if I've ever told you why I will never shop for food at Kneaders, you will understand because its along the same lines. And on top of that, I currently have Verizon, which does not allow SIM card phones on its network, so that rules out the option of hacking an iPhone.

Anyways, yesterday, an iPhone totin' friend of mine came to me with an intriguing question. He happened to have an HTML document that he wanted to view on his iPhone, except for the fact that it was unfortunately sized such that it was very inconvenient to navigate through the iPhone browser. He wanted to be able to access it without a connection to the internet, so he had installed Apache onto his iPhone to be able to serve up the HTML document locally, however there still remained the issue of having to painfully resize each page of the document when viewing it. He had stooped so low that he finally came to me.

My first thought was to utilize some kind of global CSS, but after digging into it, I realized there is no way to do that without having to include the CSS in each file of the document. Not a very sexy solution. As I continued to think about it though, I realized that there must be some way to view the pages through an iframe in a new index page and if necessary, resize the contents of the frame using JavaScript to suit the iPhone medium. My friend had informed me that there was some meta data that could be used to tell the iPhone to resize the contents of a page. So, here's what I came up with (with some tweaks he made once it was on his iPhone).

<span style="font-size:100%;"><html><head>
<title>Standard Works</title>
</head><body>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<iframe name="iframeName" id="iframeName" src="realindex.html" marginwidth="0" marginheight="0" style="width: 310px;">
</body></span>

It worked like a charm! Chalk another one up for the nerds. This could even be further enhanced to allow it to be dynamically passed a page to prevent sizing issues in any page being browsed. I'll let someone who actually has an iPhone tackle that.