I recently wrote a quick tutorial on how to create the apple product browser, but it was brought to my attention by a reader, pete, that my tutorial is incomplete. I failed to explain how to make an iPhone. So here is the explanation.

First let’s look at what we’ll be making. You can see the final results here & download it here.

The Problem

The problem is quite simple. The iPhone screen isn’t large enough for the user to use a scroll bar.

The Solution

There are many ways to go about this. They all, however, lead to the same solution—a browser-detect, or simply, a way of detecting an iPhone user automatically and having the browser change how the page is displayed.

According to Apple, the best way to detect iPhone users is by using the following code:

<?!--[if !IE]>-->
<?link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css">
<?!--<?![endif]-->


What it does is quite sneaky actually. It looks at the maximum width the browser can display. If the max is 480px or less, it links to another CSS file. Since this browser loads code from top to bottom, the lower a CSS file is, the more relevant it is. Meaning, that if a CSS file is called later and styles a specific element referenced in previous CSS files, the new styling (from the file called last) is what will be loaded.

Because this method of detection isn’t looking specifically for an iPhone (it’s only looking at the max screen size), we can style elements for smaller devices in general, not just the iPhone.

Using the new CSS file, you can completely change the look of your site and how the user interacts with. For this example, all the CSS file is doing is changing look of the scrollbar buttons and hiding the actual scrollbar.

That’s it. Again, you can see the final product browser here & download it here.

If you’re viewing it on iPhone or iPod touch, everything will work smoothly. If you don’t have access to an iPhone or iPod, don’t worry, you can remove the conditional code statement (media="only screen and (max-device-width: 480px)") from the browser-detect code and view the example in your browser. You’ll see how the page changes and you can make any changes you feel are necessary.

Give Me A Shout

Did I miss something? Is there something you want me to expand on? Give me a shout in the comments or contact me directly. Also, while you’re at it, post a link to how you use the product browser.