overflow on x axis when changing device orientation from landscape to portrait

Question

So as the title of the post says, I have an issue with overflow on x axis when changing device orientation from landscape to portrait in all Webkit browsers, I have only tried iOS and Android driven devices [ iPhone 4, 4S & 5, Samsung Galaxy Nexus, Samsung Galaxy II & III the phones that posed the issue when using either Google Chrome or Safari ].

I have placed this tag in the head of my webpage :

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

And I should also state that I'm working with media queries :

@media (min-width: 1200px)

...

@media (min-width: 980px)

...

@media (min-width: 768px) and (max-width: 979px)

...

@media (max-width: 767px)

...

@media (max-width: 480px)

...

So I was wondering if anyone encountered this issue and if you have a solution for it, because it's really annoying.

To be more precise what is happening, I have the mobile web application which is build upon the twitter bootstrap framework and it will only be viewable on mobile devices and pads too. So obviously I need to work with media queries in order to change the layout depending on the screen size you're viewing the web app. And the issue I get is that when you are on the page in portrait mode, you will change the device orientation to landscape and then back to portrait, the content will be bigger than the width of the device now, even though when you first landed on the web app page in portrait mode the layout it's the same width as the devices screen width, so only after you turn to landscape and back to portrait I get that. I hope this is a good enough explanation (:

Answer 1

You could try

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

EDIT
Ok, I normally use without that problem that meta name with media queries like below combining orientation

@media screen and (min-width: 480px) and (orientation:portrait) {

}

Answer 2

I had the same bug on a page I'm making. After minimizing the page I eventually tracked it down to a placeholder:

<input placeholder="foo">

The bug occurs if the input has a width that makes it wider than the portrait width when in landscape mode:

input {
  width 95%;
}

In case the bug you're seeing is also caused by a placeholder, a simple overflow-x: hidden on the input's parent element worked as a fix for me.

There's some more discussions on the workarond on Placeholder attribute on text input with iOS 6 from landscape to portrait