Optimizing for mobile browsers

I have a simple web page that is generated on the server. It has simple text fields, radio buttons, labels and things like that (much resembling a simple form). I'm trying to optimize this for mobile browsers. I'd like to do it in as much CSS as possible, and I'd like to find a way to support iphone, android and the popular mobile OSes.

My question is this, can I style t开发者_如何转开发he page so that fields will always take 100% of the width of the phone, labels will wrap,and so on, but also make it so the user cannot zoom in or out and have the scaling appear correctly weather an iphone4 or an iphone3g is looking at it?

I've found bits and pieces of my answer using meta tags, but I can't seem to find a way to make the scaling always right, regardless of the resolution.

---

<meta name="viewport" content="width=device-width, user-scalable=no" />

This works great for iOS, but in landscape view of BlackBerry and Android, the page stays on the left and doesn't scale up. I think this has something to do with iOS inferring height (and other attributes) if not explicitly set, while other platforms might need the height=device-width set.