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

【问题标题】：How to remove extra white space from website when viewed on mobile browser在移动浏览器上查看时如何从网站中删除多余的空白
【发布时间】：2019-06-12 03:39:16
【问题描述】：

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

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

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

谢谢！

我的网站：fanismahmalat.com

【问题讨论】：

我在 Chrome 中检查了不同的窗口宽度 - 您能否更具体地使用设备/浏览器并添加屏幕截图？
@DriveItLikeYouStoleIt 我在三星手机上用Chrome试了一下，出现了空白！
@DriveItLikeYouStoleIt 我有一部 OnePlus3T 手机并添加了它的截图。在我滚动整个页面后，在页脚上，它恢复正常。

标签： javascript html css space

【解决方案1】：

问题在于笔记本电脑的图像宽度超出。 https://i.stack.imgur.com/zlg6R.png

【讨论】：

但它是 .nutri_image 的 100%，它在 .nutri_container 内有 12 列宽。它是如何超过它的？
这不是真的。
因为您要为图像提供高度，所以默认情况下，高度应为该尺寸的 100% 宽度
@kattyazabache 抱歉，我没看懂你说的最后一部分 :)
移动模式下的图像必须自己适应，在该尺寸下，它必须具有宽度：100% 和高度：初始

【解决方案2】：

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

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

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

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

【讨论】：

好吧，overflow-x:hidden on html,body 修复了空白问题，但它破坏了所有滚动结构..
抱歉，仅在 Chrome 上的移动模拟器中测试过。你是对的
感谢您的提示。我遇到了完全相同的问题，html 和 body 上的 overflow-x: hidden; 解决了我的问题。关于滚动问题，就我而言，它在桌面和移动设备上运行良好。