整个网站在“移动”视图中右侧有白色边距

Question

我试图

1. 将正文和html宽度设置为100％！重要
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-scaleable = 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”类应用“ row no-gutters”，并从所有col类中删除“ p-0”。 有时，这个问题还会导致不同视图之间存在空间问题。