Question

I am experimenting with jquery mobile (beta 3). Everthing works fine when you load your application. However when you rotate your iPhone to horizontal, the layout doesn’t adjust itself correctly.

Same problem can be observed on http://jquerymobile.com/demos/1.0b3/

Does anyone have a solution?

Answer 1

If zoom isn’t needed <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> is the least hackish.

If you want to keep zoom, try this solution.

var viewport = $('meta[name="viewport"]');
var nua = navigator.userAgent;

if ((nua.match(/iPad/i)) || (nua.match(/iPhone/i)) || (nua.match(/iPod/i))) {
  viewport.attr('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0');
  $('body')[0].addEventListener("gesturestart", gestureStart, false);
}

function gestureStart() {
  viewport.attr('content', 'width=device-width, minimum-scale=0.25, maximum-scale=1.6');
}

FYI: this is a known issue, see jQM docs

There is a minor issue in iOS that doesn’t properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.