My issue involves using the meta tag to set the viewport width to match the device's width:
However, upon loading the page on Chrome for Android, the width initially matches the device width. Yet, when I scroll, scrollbars appear and reduce the available width. The browser then incorrectly calculates that the viewport is too small to accommodate both the page and the scrollbars, leading to a slight horizontal scroll.
This problem is frustrating because my intention was for users to only scroll vertically. How can I prevent this unwanted horizontal "jiggle" effect?
I've tried setting margin: 0 10px as a workaround, which has worked based on knowing the scrollbar width of this specific device. Nevertheless, other devices have wider scrollbars, and I don't want to sacrifice screen space by guessing at the right margin values.