整个网站在移动视图的右侧有白边

Question

我试过了

1. 将正文和 html 宽度设置为 100% !important
2. 检查了具有正确值的视口

   width=device-width,initial-scale=1,shrink-to-fit=no

所以我对接下来要检查的内容一无所知。

有人能告诉我吗。

更新 我的问题被标记为与this question 重复，请我解释一下，好的，我们开始吧：

如你所见，如果我添加了这段代码

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

我的英雄形象和我的下一部分之间会有一个巨大的空白，并且顶级部分消失了。

Answer 1

当您调整浏览器窗口大小时，您的视口会缩放，因此添加 user-scalable=0 将解决该问题。 （目前按 ctrl+0 即可解决问题）

用这个替换你的视口：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">

Answer 2

看起来您的浏览器视口有问题。当我们在不刷新的情况下更改端口时，看起来您已经共享，但是当我们在同一个端口中打开时，它工作正常。我也已经在在线模拟器中进行了测试，工作正常。检查这个 http://www.responsinator.com/?url=vibeshtml.dharansh.in%2F

谢谢

Answer 3

我注意到您在使用“row”类，然后在“col-*”类中使用“p-0”。实现的理想方法是，如果您不想要装订线空间，则将“row no-gutters”与“row”类一起应用，并从所有 col 类中删除“p-0”。 有时，这个问题也会导致不同视图之间的空间问题。