how to fix Viewport issue when going from landscape to portrait

问题

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.

回答1:

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 */
  }

回答2:

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!

回答3:

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%;}
}

来源：https://stackoverflow.com/questions/12695224/how-to-fix-viewport-issue-when-going-from-landscape-to-portrait

标签

ios

viewport

ipod

iphone-4