I was recently working on a jQuery Mobile application and everything looked great on my 21” touch monitor on several browsers, but when I deployed to the server and then hit the page on my iPhone, I ran into a few issues that I needed to work through in order to make the site what I’d call usable.
The first issue was that the site wasn’t scaling properly when it first loaded and everything was so small that I could barely click on it with my finger. Certainly, this is not what I’d call optimal for a mobile site.
I originally played around with increasing font-size for the body and a few other quick CSS tricks, but nothing really did the trick. I finally came across a meta tag which seemed to fix this issue.
This is what it looked like after adding this meta tag.
However, this created a new issue. This second issue was that when I rotated from Portrait to Landscape mode, the web page did not scale properly and my toolbar buttons were now cutoff on the right-hand side like this:
This is what the site looks like now when it’s rotated.