2
votes

I'm using the following meta to set the viewport to the device width meta(name='viewport', content='width=device-width, initial-scale=1.0, user-scalable=0;')

When I load the page on chrome for android, it seems like the page width is the device width, but as soon as i scroll, the scrollbars appear and eat into the page width, so the browser thinks the viewport is suddenly not big enough to fit the page AND the scrollbars, and suddenly no lets me scroll horizontally by a few pixels.

This is extremely annoying because I am setting the width to device-width so that users only scroll vertically. How do I stop the page from being able to "jiggle" horizontally?

I tried setting margin: 0 10px and it seems to work because I happen to know the scrollbar width on this particular device, but some devices have a wider scrollbar, and I don't want to lose precious pixels from the available screen real estate.

1
Can you give us some code or jsfiddle demo? Maybe the problem is in some element with 100% width and additional padding or margins... - Aleksandar
yes, you win! that was it, and jsfiddling a page from scratch made that obvious. thanks! - user1678406

1 Answers

2
votes

in your body tag add css overflow-x:hidden