How to fix the problem with Viewport when switching from landscape to portrait

Question

I did some research into viewport issues on iPod and iPhone 4 Safari, but I can't find the answer to this question. There are several topics about issues going from portrait to landscape, but not from landscape to portrait. The problem is this:

I had a normal zoom problem when moving from portrait to landscape, so I added the tag:

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

So this problem has been fixed. NOW, when I return to portrait mode, the page I made has stretched out and it appears with the right edge added. This makes the page wider, so you need to scroll left to get the original position of the page (assuming that it retains a new “right margin”).

Sorry if someone already answered this, but I just could not find an answer to this problem.

Let me know if additional information is required. Keep in mind my first question: /

Thanks!

EDIT: I am running iOS 6 and getting this problem. When I launch my page on iOS 5.1.1, it displays correctly, so this may be a new version of the error in the viewport that has been fixed earlier.

Answer 1

I think you want to add this to your CSS or style. ( It was in this post )

  html { -webkit-text-size-adjust: none; /* Never autoresize text */ } 

Answer 2

I found a workaround for this through jquery and css. I have no idea how efficient this works, but this is an option that worked for my needs. Basically, add the id #orient tag to your body tag, and then make the .ios6-mobile class that has the maximum width of the device you encounter. In my case, it was the size of the iphone on which ios6 works, so I had a maximum width of 320 pixels. Here is the jquery code.

JQuery

 window.addEventListener("orientationchange", function() { if(window.orientation == 0){ $("#orient").addClass("io6-mobile"); } else if (window.orientation !== 0){ $("#orient").removeClass("io6-mobile"); } }, false); 

CSS

 #orient { /* Don't need any code. Just a helpful ID to pass to jQuery */ } .ios6-mobile { max-width:320px /* change the width to whatever size your device is */; overflow:hidden; } 

Hope this helps in some way!

Answer 3

It helped me solve the same problem.

 @media (max-width:640px) and (orientation: landscape) { body {-webkit-text-size-adjust: 100%;} } 

And for retina display error

 @media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) { body {-webkit-text-size-adjust: 70%;} }