how to fix Viewport issue when going from landscape to portrait

Question

I've been doing some research about viewport issues in iPod and iPhone 4's Safari, but i can't find any answer on this matter. There are several threads about issues going from portrait to landscape, but not from landscape to portrait. The issue is the following:

I used to have the normal zooming issue when going from portrait to landscape so i added the tag:

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

So that fixed that issue. NOW, when I go back to portrait mode, the page I made gets streched and it renders with an added right margin. This makes the page wider, so you have to sweep to the left to get the original position of the page (thought it keeps the new 'right margin').

Sorry if there was someone that already answered this, but i just couldn't seem to find any response to this issue.

Let me know if some additional information is required. Please keep in mind it's my first question :/

Thank you!

EDIT: I'm running iOS 6, and getting this issue. When i run my page on an iOS 5.1.1 it displays properly, so it might be a new version of the viewport bug that was fixed before.

score 3 · Answer 1 · edited May 23 '17 at 11:51

3

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

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

edited May 23 '17 at 11:51

Community

1
1

answered Oct 02 '12 at 19:29

Mike M

4,358
1
28
48

I just tried adding this line in my CSS sheet, but it's not fixing it. – Alfie Barboza Oct 02 '12 at 19:49
are you using and – Mike M Oct 02 '12 at 19:51
Yep, in my first line of the html page, and i close it at the bottom. – Alfie Barboza Oct 02 '12 at 19:53
Yeah, I thought about that, the problem is that the app I'm making, contains input fields, where the user enters personal info, so if I reload the page, I guess I'll lose the information entered in those fields. – Alfie Barboza Oct 03 '12 at 13:49

score 2 · Answer 2 · answered Jul 25 '13 at 19:02

I found a workaround for this via jquery and css. I have no idea how effective it works, but it's an option that worked for my needs. Basically, add the #orient id tag to your body tag, and then make the .ios6-mobile class that has a max-width of the device that you are seeing an issue with. In my instance, it was for iphone size that are running ios6, so I had a max-width of 320px. 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!

score 1 · Answer 3 · answered Oct 23 '12 at 08:42

This helped me to solve same issue

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

And for Retina display bug

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

how to fix Viewport issue when going from landscape to portrait

3 Answers3

Linked