Responsive site on mobile- horizontal slop on the iPhone

I’m creating my first responsive-design site and so far so good. It’s almost done, but I’ve noticed something. It looks good on iPhone and I’m using media queries but when I view the site on my iPhone I can drag the whole layout side to side so far the I can make only the iPhone gray background show and then let go and the page springs back into place. I’d like the site to be rock solid so you can’t move it side to side. When a user goes to scroll something the site is drifting side to side. Is there a way to eliminate this?

code-wise, I have too much to put it all here but basically I have my media query saying:

@media screen and (min-width: 320px) and (max-width: 674px) {
#page-wrapper {width:auto;margin:0 auto;padding:0 1em;}
}

I’ve tried changing all those values but to no avail.
in my <head> I have:

<meta name=“viewport” content=“width=device-width, minimum-scale=1.0, maximum-scale=1.0”>

Thanks in advance for any help.

Rick

From what I’ve researched, try doing this.

[LEFT]<meta name=“viewport” content=“width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no” />

Then add this to your CSS:

body {
overflow-x:hidden;
}
[/LEFT]

I just did that and… the problem is not as bad, but I can still move the page side to side. If I just look at my browser that I’m shrinking to do testing, the layout is rock solid and no scroll bar, but the phone, though better, still has a lot of horizontal play in it. Some better, though. thanks.

Rick

I doubt there’s anyway to further restrict it, to be honest.

I’ve been searching for the past 10 minutes and there seems to be nothing available online to possibly stop this. I saw mention of some Javascript but I couldn’t make much sense of it. Perhaps the answer lies there…

I’ve made some adjustments with success.
#page-wrapper {
width:auto;
max-width:auto;
padding:0 1em;
margin:9px;
}

It’s rock solid in portrait and landscape views but the margins on the sides are a little to much for me. I tried reducing the values on margin and padding and this is the best I can do. Anything else and I get the problem again. And of chourse I don’t have any other idea what other mobiles are doing.

BTW: do you have a mobile/tablet emulator that you’d recommend?

Thanks,

rick

Well, I have Opera installed for testing on my computer anyway, so I’ve picked up this tool :).

I had this sliding problem but fixed it. Not sure what actually fixed it any more, but you seem to have everything I have, except max-width: 98%;

You can load Opera on your iPhone, so that’s the first think I’d do.

Also, check out Mobilizer, which is a free desktop app that emulates iPhone, Android, Blackberry and Palm Pre.

what totally fixed it is putting overflow:hidden also on the page-wrapper div. I got that idea from you. thanks again.

#page-wrapper {
width:auto; overflow:hidden; max-width:auto;padding:0 .5em;
}

Everything works now.

rick

It’s weird that that fixed it, while putting it on the body did not. You’d think that putting it on the body would restrict the entire page, in taht sense. But I guess not. Good job figuring it out :).