Developing Apps for Smartphones

Question

After working on an APEX app for mobile smartphones, I thought I share some hints with the community.
I've been using Opera Mobile (http://www.opera.com/products/mobile/) on my windows mobile phone for a while, as it blows IE Mobile away (tabbed browsing, desktop emulation, the list goes on and on...).
I discovered that the desktop version of Opera (http://www.opera.com/products/desktop/) is really good at emulating the functionality of Opera Mobile, and to some degree, IE Mobile.
First, go to Tools > Preferences > Advanced Tab > Browsing > Check the box next to Show web page size in title bar. Here's a screenshot of the this setting:
http://tylermuth.smugmug.com/gallery/2194265
Now resize the window to your target device size (displayed in the upper left of the title bar). I was targeting the HTC Wizard Windows Mobile phone, so I opened 2 windows and made one 320x240 and the other 240x320 since the orientation of this device changes when you open the keyboard. The second screenshot shows the size in the title bar.
The last thing to do is go to View > Smallscreen. This is the default view of my phone in portrait mode, but not landscape. So I only changed this setting on the portrait sized window. The third screenshot is of this setting, and you can see the resulting web page behind the menu. It tends to change everything into one long vertical column, regardless of what XHTML you used.
Hope this helps, I know it made it a lot easier for me to test my app.
Tyler

Answer 1

I'm sure this has been posted before, but many mobile browsers will ignore the default stylesheet unless you use mediatype handheld when defining local styles:
<style>
@media handheld
body{font-family:arial,helvetica,sans-serif;}
</style>or when including stylesheets:
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">