While testing a jQuery Mobile Framework based web app on iPhone, I noticed iPhone displayed the web page zoomed out with very small text. I thought I had forgotten to add some styles or messed up something in my custom css but turned out some thing very basic, just add it in the top of your template inside head tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This one line fixes buttons, forms elements and text sizes magically.
Hope that helps.