Make Website and WebApp Compatible with iPhone and Blackberry

Most websites and web pages will be compatible and work fine on iPhone and Blackberry. However, it’s still possible to make the web sites more supportive, ready and friendly to Apple iPhone by giving more information to iPhone about how the webpage should be displayed on the iPhone browser. Beside, for web sites 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 ensure iPhone and Blackberry compatibility to ensure that the page is rendered and formatted correctly and avoid problem such as web page or application not scaling properly when rotate and Safari browser zooming out.

One of the best way with just one line change on website coding to make website and web app support iPhone and Blackberry is by telling the PDA phone of the viewport size of the overall page. 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 visual formatting model for visual media in CSS 2.1 specification, where it 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 try to make your website fit into iPhone and BlackBerry view area. The example of usage:

<meta name=”viewport” content=”initial-scale=1.0″ />
<meta name=”viewport” content=”user-scalable=false” />

You can mix the setting u want to use into a single META HTML code such as:

<meta name=”viewport” content=”width=320,user-scalable=false” />


This entry was posted on Thursday, July 12th, 2007 at 9:57 pm and is filed under Programming Languages. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Make Website and WebApp Compatible with iPhone and Blackberry”

  1. wow
    June 23rd, 2009 22:32
    5

    I read this completely and don’t understand it at all. I don’t understand it because you are a complete idiot. Please go back and look at your grammar.

    This is one sentence?

    Beside, for web sites 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 ensure iPhone and Blackberry compatibility to ensure that the page is rendered and formatted correctly and avoid problem such as web page or application not scaling properly when rotate and Safari browser zooming out.

  2. Lisa S.
    May 19th, 2009 19:42
    4

    You made some good points there. I did a search on the topic and found most people will agree with your blog.

  3. Jonathan Ellis
    March 25th, 2009 13:34
    3

    http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/#detection

    this is the ultimate guide for building an iphone compatible website

  4. Jorge Linares
    January 6th, 2009 21:12
    2

    Nice post, i’ve been looking for articles about how to design and develop websites compatible with iphone

  5. kim
    December 31st, 2008 11:56
    1

    It looks very simple, thank you :)

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to comments feature has been disabled. To receive notification of latest comments posted, subscribe to My Digital Life Comments RSS feed or register to receive new comments in daily email digest.
« Google Maps’s New Features
TiVo and Amazon Subscribers to Download Movies or Shows Directly to TV Sets »

Custom Search

New Articles

Incoming Search Terms for the Article

website for iphone - iPhone compatible website - website iphone - websites for blackberry - make website iphone compatible - Create iphone website - website iphone compatible - blackberry compatible websites - how to make an iphone website - make iphone website - create iphone web app - meta name="viewport" - designing web pages for blackberry - how to make website for iphone - creating an iphone website - meta name viewport - make a website for iphone - make website for iphone - blackberry compatible website - creating iphone website - how to make a website IPhone compatible - create website for iphone - - creating websites for blackberry - make web page for iphone - designing web pages blackberry - blackberry web apps - make website mobile compatible - make a iphone website - making iphone websites - make iphone site - create a iphone website - creating website for iphone - blackberry web app - how to build an iphone website - making website for iphone - create iphone compatible site - web app for blackberry - how to make iphone websites - creating iphone websites - create website for blackberry - making website iphone compatible - how to make an iphone compatible website - iphone compatible web page - creating a website for iphone - how to make a iphone website - how to create an iphone website - create blackberry website - iphone website compatible - iPhone website compatibility - create iphone page - iphone compatible web site - creating a website for the iphone - site compatible iphone - how to make iphone web app - making a website for iphone - how to make a web app for iphone - make iPhone webpage - how to make website iphone compatible - programming websites for iphone - how to make website for blackberry - create a website for iphone - make your website iphone compatible - creating a iphone website - create web page for iphone - how to make iphone website - how to make iphone webapps - make my website iphone compatible - blackberry friendly website - make your site iphone compatible - create page for iphone - make an iphone website - making your website iphone compatible - how to make website mobile compatible? - iphone website -