Most websites and web pages can be made 200% more usable for iPhone visitors in under 5 minutes using 1 line of code! While it’s possible to make the web sites more presentable on an iPhone in a variety of other ways, giving more information to the phone about how the webpage should be displayed in the browser will automatically create a more condensed view of your website for your customer.
For websites that try to emulate the functionality of the built-in iPhone applications such as webapps that use Canvas, AJAX functionality and limit the size of the page to 320×480px (or 480×320px), it’s best to consider iPhone and Blackberry compatibility to ensure that the page is rendered and formatted correctly and avoid problems such as your web page or application not scaling properly when the user interacts with your site using MobileSafari’s unique browsing capabilities.
One simple way to make your website more iPhone and Blackberry compatible is by telling the phone how big the content should initially be displayed in the viewport. To do so, simply add the following line to the HTML HEAD section of the web page:
<meta name="viewport" content="width=320″ />
Viewport is a window or other viewing area on the screen through which users consult a document (mean part of the screen that you’re actually seeing). User agents may change the document’s layout when the viewport is resized. Other parameters applicable for viewport include initial-scale, user-scalable, minimum-scale and, maximum-scale where you can make your website fit into iPhone and BlackBerry view area. Here’s an example:
<meta name="viewport" content="initial-scale=1.0″ />
<meta name="viewport" content="user-scalable=false" />
You can mix the settings you wish to use into a single META HTML code such as:
<meta name="viewport" content="width=320,user-scalable=false" />If you haven’t already, Sign up for our newsletter to receive more articles on how to make your website more iPhone compatible.
