Question

I’m creating a mobile version of a site. I have 3 divs, each 33.33% wide of a body with a width of 300%, (so they’re all the full width of the screen), floated left so they’re all side-by-side, and you can slide between the divs by clicking links.

I’ve added overflow-x: hidden; to the body tag to remove the horizontal scrollbar. This works fine on a desktop, but on my iPod touch, I can still drag and scroll horizontally using my finger, which I don’t want.

Answer 1

Try adding this to the HTML head section:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

This will set the width of your page to the width of the device viewing it. On an iOS device it will also disable the pinch-to-zoom gesture.