This morning I got the motivation to attempt to make my blog format correctly on the iPhone. I expected it to be a lot more challenging then it really was. I began this project by reading the Apple provided Safari Web Content Guide for iPhone, specifically looking at Chapter 2: Configuring the Viewport. The viewport is how you tell your content, what the viewable area of the iPhone actually is.

Apple recommends that you set the viewport width to device-width so that the scale is 1.0 in portrait orientation and the viewport is not resized when the user changes to landscape orientation.

With this knowledge I added a very simple meta tag to my wordpress header.php

<meta name = "viewport" content = "width=device-width">

This simple meta statement, caused my site to format much better on MobileSafari regardless of the iPhone being in landscape or portrait mode. This might be good enough for the masses, but it wasn’t quite how I wanted it. The element that I needed a little more control over, as Apple refers to it, is called user-scaling.

There are four different scaling options that you can control through the viewport meta tag. The most important options that I looked at are: user-scalable=yes/no and maximum-scale=xxyy. What these two options will allow you to control is how much (if at all) the user can scale in/out the viewed page in MobileSafari.

The explanation of these scaling options in the Apple documentation is pretty straight forward, but I wanted to see a real world application of it. After a little googling, I came across a really great site for iPhone Web Developers. They have some really nice examples for formatting and scaling web content and user interaction on the iPhone/MobileSafari. Based on this example, I was able to create the look I was going for.

<meta name = “viewport” content = “user-scalable=yes, width=device-width, maximum-scale=0.6667″>

The above meta tag is taken straight from my site’s code, this is all it takes to make the content fit the iPhone screen how I wanted. If you need further explanation into the maximum-scale, refer to the iPhone WebDev site linked above. However I will summarize it to this, maximum-scale is the maximum ratio at which a user can “zoom in” on the viewable content.

However, I did not stop there. You have undoubtedly seen iPhone webapps that when viewed on MobileSafari, hide the URL text bar creating a cleaner viewing area. I decided to implement this on my site as well. Referring back to the iPhone Web Developers site, they also have a great example on how to achieve this as well. Adding a very simple javascript to the header (below the viewport meta tag), will detect the iPhone UserAgent and remove the URL text bar accordingly (other browsers illicit no result).

<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>

That’s all there really is to it. If all went well, your site should now correctly scale to fit the iPhone screen and the url text bar should automatically hide for added coolness. Enjoy this post, and comments are always welcome.

This entry was posted on Monday, March 10th, 2008 at 11:33 am and is filed under iphone, site news. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.