2

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

Black Mamba
  • 205
  • 1
  • 5
  • 21

3 Answers3

3

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

Community
  • 1
  • 1
Leon
  • 4,532
  • 1
  • 19
  • 24
  • the problem with your code is that the page doesn't zoom/stretch/expand at all in the landscape mode, now i don't want that...i want it to expand in landscape mode but not stay that way when i come back to the portrait mode – Black Mamba Dec 06 '11 at 11:56
  • so you actually need 2 different viewport tags, one for landscape and one for portrait... [here's one way to do this](http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon) – Leon Dec 06 '11 at 11:57
1

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

Community
  • 1
  • 1
BertC
  • 2,243
  • 26
  • 33
0
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

}
user1083202
  • 3,102
  • 1
  • 14
  • 2
  • this seems good....but instead of having two stylesheets, can i somehow access the page scale .....this is what have in mind -- in portrait mode the page scale is 1.0 and in landscape mode it is 2.0 – Black Mamba Dec 06 '11 at 12:12