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:
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.
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?
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 :).