iphoneblackberrymobileie-mobile

How to make a simple site render correctly on multiple mobile browsers?


We have a rather simple site (minimal JS) with plain html and CSS. It is a simple mobile interface for our main application.

We are running into trouble because we have more than one column and several browsers seem to force single columns.

Through some searching I ran into 2 meta tags.

<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />

With these we have a good 'scaled' view for IE Mobile and the iPhone. We have not run into any problems with palm's Blazer. But Blackberry is another matter.

Does the Blackberry have a simple way to control the view of the browser as well? By simple I mean without making a special page for that device.


Solution

  • I wouldn't bother making a "medium" version for the iPhone etc, iPhone users can just look at your real web page easily enough. Have your full version and a single column version, and you'll reach the largest audience with minimal work.

    To answer your question though, there's no good way to make the Blackberry do anything other than 1 column views. You can get it to look fairly professional, as CSS and simple javascript still apply, but you'll have to lose a lot of your horizontal real estate.