How to Scale a jQuery Mobile Site for iOS

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. 

1. <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 available around the web.  However, after a bit of experimenting, 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:

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

This is what the site looks like now when it’s rotated.



Source: http://www.wintellect.com/blogs/rrobinson/how-to-scale-a-jquery-mobile-site-for-ios