javascript - 在移动浏览器上查看时如何从网站中删除多余的空白

Question

浏览器在移动屏幕的右侧呈现额外的空白。我尝试修改以下属性而没有任何进展：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

它仍然没有删除额外的空白。我也没有看到任何元素从网格的一侧溢出。有任何想法吗？

谢谢！

我的网站：fanismahmalat.com

标签： javascripthtmlcssspace

Answer 1

当滚动条离开空白区域切换到移动设备时，似乎发生了一些奇怪的事情。

我在 Chrome 检查器的 CSS 中添加了以下内容，它解决了这个问题：

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

我只在 Chrome 中对此进行了测试，并在检查员中再次进行了测试，但这可能会有所帮助。我注意到你有height:1000px（硬编码为 1000px）。我不确定究竟是为什么，但我认为如有必要，您可以将其保留。