Css，不需要在移动设备上水平滚动

Question

我遇到了一个小问题，由于某种原因，我看到 <html> 标签左侧有一个巨大的白色间隙

我尝试添加 HTML 和 body 标签这个规则：

overflow-x: hidden; max-width: 100vw;

它适用于桌面视图（即使我调整浏览器大小 window）但它对移动设备没有帮助（它对 chrome 开发工具中的移动视图没有帮助）。

可能是什么问题？我认为这与站点css主要使用flexbox有关。

我也怀疑这与图片中红色标记的div有关（位置固定，但由于某种原因向下滚动后出现）。

这是divcss规则

.contact-mobile{
    position: fixed !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 100vw;
    background-color: $black;
    opacity: 0.9;

    a{
        min-width: 25%;
        text-align: center;
        padding: 5px;
        i{
            color: #fff;
        }
        &:hover{
            opacity: 1;
            i{
                color: $black;
            }
            background-color: $green;

        }
    }
}

这是开发站点 http://davdev.co.il/broker 这是我所见的缩小图 https://www.screencast.com/t/P7zQwdWySBv

Answer 1

问题出在您的 iframe 位置，

用 top: -5000px 代替 left: -5000px，这将弥补移动设备上的差距

Css，不需要在移动设备上水平滚动

Css, unwanted Horizontal scroll on mobile

html

css

overflow

flexbox