JQuery rotation speed issue

Question

I am experimenting with jQuery mobile (beta 3). Everthing works great when downloading an application. However, when you rotate the iPhone horizontally, the layout is not configured correctly.

The same problem can be found at http://jquerymobile.com/demos/1.0b3/

Anyone have a solution?

Answer 1

If scaling is not required, <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> is the least hacker.

If you want to keep the scale, 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

IOS has a minor issue that incorrectly sets the width when changing the orientation with these viewport settings, but this, hopefully, will be fixed in a future version. You can set other values ​​for the view to turn off scaling if necessary, as this is part of the content of your page, not the library.