Screen Orientation Issue on Page using Jquery Mobi

问题:

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

回答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

回答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">

回答3:

This may be helpful for you, mantain two stylesheets in landscape and portrait mode 

 window.onorientationchange=detectIPadOrientation;

function detectIPadOrientation()
{
    //check for the mode and apply the appropriate style sheet,window.onorientationchange is the method will be called whenever the orientation changes

}