Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

Question

I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode

Answer 1

Seems as though results are varying for different circumstances but a sitewide

html, body { width:100%; x-overflow:hidden; }

seems to have worked for me!

Answer 2

This problem occurs when width of any division is greater than the width of iPAD's screen.

In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.

Answer 3

Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.

To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.

Answer 4

I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.

The following code fixed it for me (can't remember where I got it from at the moment)

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Answer 5

Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).

Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:

If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:

.control-group .controls {
     overflow-x: hidden
 }

Now the white space on the right was gone :)

Answer 6

I had the same problem, I fixed it by setting:

html, body { width:100%;  overflow:hidden; }