The
meta viewport tag is what really makes mobiles, well, mobile! Without it, mobile browsers will assume that it is a desktop site and everything will be small and will require pinch-and-zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
This meta viewport tag actually prevents pinch-and-zoom actions. Why? It does this because modern smart phones are now used by more than just the technical elite. I've seen people accidentally zoom in, while just trying to tap a link; and they had no idea what they had done, or how to get out of it. Regardless, if you use jQuery Mobile, your users have no need of zooming anyway.
We will need custom styles. There's no way around it. Even if we use the jQuery Mobile ThemeRoller (http://jquerymobile.com/themeroller/), there's always something that needs overriding. This is where you put it:
<link rel="stylesheet" href="css/custom.css" /> <script src="js/custom...