Building a Better Website Day #10

2:46 am What's Cool?

Today I added specially formatted pages for the iPhone/iTouch.  I only added pages for the latest news and individual news article pages, maybe some day I’ll do the rest of the site, but for now, we only needed the two main pages.

The first step was to detect if we are using an iPhone. 

dim sDevice
sDevice = LCase(Request.ServerVariables("HTTP_USER_AGENT"))
if InStr( sDevice, "iphone" ) then
    Response.Redirect "iphone.asp"
end if

Once I detect the iPhone, we just redirect to a new page that is just formatted for the iPhone.  I could have gotten fancy and had the same page render differently, but I figured it was easier to just have them go do a different page.  Since the screensize is 320×480 in portrait mode, we need to make sure that the whole page doesn’t exceed 320 pixels.  You can do that through a special meta tag:

<meta name="viewport" content="width=320">

Now that we’ve detected the iPhone and set the page width, the rest is just a matter of formatting on the page.  You can see the result online at: http://www.comicbooknews.us/iphone.asp