Is there a way to prevent the navigation menu from wrapping on the iPad? With somewhat limited knowledge I tried adding this meta tag above the </head>:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
I thought this might overwrite your meta tag of <meta name=”viewport” content=”width=device-width” />. But instead it yielded some fairly unpredictable and undesirable results.
Here’s a screen shot of the iPad menu (top) and a screen menu (bottom). I didn’t crop either image side to side. The nav bar on the iPad goes side to side (1280px) with no margin. That’s unlike the screen nav bar where I tried to get the window width to 1280px before doing the screen capture. On the screen version the Chrome developer tool showed #wrapper at 1071px with right and left margins of 96px.
I can produce a similar result to the iPad on my screen if I reduce the window width to between 768px and about 808px. At 809px the nav bar no longer wraps. I’m not sure there’s a correlation but thought I’d mention it.
Not sure whether any of this gives you a clue as to what a solution might be. Hope so though.