Some notes after creating a basic mobile tool using Drupal. Not exhaustive research but could be handy to someone trying to do the same.

Created a new theme got rid of all regions bar $content.

Also as we didn’t need them for the app, commented out tabs.

Even if you keep all content in a page small it looks like webkit will still zoom out by default. <meta name = "viewport" content = "initial-scale = 1.0"> sets the zoom level to 1.

However even with the meta tag above webkit will still zoom out if there are widths which push the content above the width of the screen.

So I had to make sure there were no CSS widths specified. Percentages seem to work well. If you are worried about how things will look on a full size screen you can use max-width (even though this won’t help those on IE6).

Even after that some form items end up being created too small so I had to do a hook_form_alter and make sure size was 20 for all textarea and password fields.

I didn’t research too much but it looks like the android webkit struggles with long class names, things like div#block-formblock-node_entry just wouldn’t match.

Quriksmode mobile browser CSS tests is also a handy find