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.