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.
- <meta content=”width=device-width, initial-scale=1″ name=”viewport”>
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:
I found numerous references to this known issue with iOS scaling and even found a few javascript fixes avail
able around the web. However, after a bit of experimen
ting, I found that I could fix the issue with just a few tweaks to the meta tag above and using no javascript. The final meta tag looks like this:
This is what the site looks like now when it’s rotated.
