html - 使用视口(viewport)宽度=设备宽度时如何禁用移动设备上的轻微剩余水平滚动

标签 html css mobile scroll viewport

我使用以下元将视口(viewport)设置为设备宽度 元(名称='viewport',内容='宽度=设备宽度,初始比例=1.0,用户可扩展=0;')

当我在android版chrome上加载页面时,页面宽度似乎是设备宽度,但是一旦我滚动,滚动条就会出现并占用页面宽度,因此浏览器认为视口(viewport)突然不存在足够大以适应页面和滚动条,突然不允许我水平滚动几个像素。

这非常烦人,因为我将宽度设置为设备宽度,以便用户只能垂直滚动。如何阻止页面水平“抖动”?

我尝试设置 margin: 0 10px ,它似乎有效,因为我碰巧知道这个特定设备上的滚动条宽度,但有些设备有更宽的滚动条,我不想从可用屏幕上丢失宝贵的像素房地产。

最佳答案

在你的body标签中添加css overflow-x:hidden

关于html - 使用视口(viewport)宽度=设备宽度时如何禁用移动设备上的轻微剩余水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24481224/

相关文章:

html - 想把这个菜单栏固定到顶部

javascript - 方向更改后的移动视口(viewport)高度

html - 斜杠不指向带有 htaccess 的目录

css - 如何消除拖放div中的水平滚动条

javascript - Chrome 扩展,如何延迟脚本直到页面完全加载

html - 复选框样式提示

javascript - domToImage 代码仅在 iOS 浏览器上抛出安全错误(Dom 异常 18)

sql - 如何从一个地方控制HTML表单字段的定义,表示,验证和存储?

html - 如何在没有宽度和自动溢出的容器中打断长文本字符串

jquery - 延迟更改 css