Screen Orientation Issue on Page using Jquery Mobile

Question

I have just started working on mobile web apps, i am making HTML5 pages using Jquery Mobile. I tested my pages on iPhone & iPad. The issue is that when i change from portrait to landscape and then from landscape to portrait mode, my pages remain zoomed in. How can i restore to the optimum zoom level whatever the orientation maybe, after n number of orientation changes. I have used device-width, device-height, device-density in my meta-tag

Solution 1

Not sure from where you got yours, but this is the viewport meta tag that I am using and am pretty sure it will solve your problem:

<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"  />

UPDATE:

you'll need 2 different viewports, one per orientation mode. check this out to see how to change them on the fly.

Hope this helps

Solution 2

I have the same problem.

This post answers your question: JQuery Mobile Beta 1 is not resizing the screen on iphone when rotated to landscape Although I do not use Beta but version 1.1.0, the solution applied.

In short, your Viewport Meta should look like this.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">