手机右侧的空白区域

Posted 2023-03-12

【中文标题】手机右侧的空白区域

【英文标题】：White space on the right side from mobile

【发布时间】：2014-03-27 17:05:47

【问题描述】：

我知道很多人都在谈论它，但我仍然无法脱身。 我有一个面向移动设备的网页，但我仍在尝试删除右侧的空白区域。

感谢

，我在 ios 上部分解决了这个问题

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

和

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

但在 android 上它几乎总是会发生。虽然overflow-x是隐藏的，但实际上如果我开始向下滚动然后向左拖动，空白就在那里。

如果我从屏幕的最右侧开始向左拖动，它也会变得可见，就好像我想显示滚动条一样。

我想我必须用 CSS 中的 @meta 标签来解决它，但我不知道如何开始。 有人可以给我一些提示吗？

很遗憾，由于社会政策，我无法分享整个代码。

谢谢大家。

【问题讨论】：

考虑按照this blog post explanation 将width: 100%; 切换为width: auto;

这可能是由于各种原因而发生的。调试的一种方法是在页面注释上逐段注释，如标题、主要内容、侧边栏等，然后在移动设备上检查，然后您可能会发现哪段代码有问题

【参考方案1】：

您可以将 Android 设备连接到计算机并检查页面。你试过这个吗？对我来说，这是找到此类错误的最简单方法。

【讨论】：

我很好奇！但是如何在计算机上检查移动浏览器屏幕，请您详细解释一下

当然。您必须在您的手机上打开一个页面，将您的手机与计算机连接并安装this plugin for Chrome。然后你午餐插件，这就是全部 - 你可以检查在你的手机上打开的网页。它看起来像在第三张照片上。

我将您的答案设置为正确答案，因为它对我帮助最大。我知道 USB 调试，但没有意识到它向我展示了手机上的所有 HTML 元素。白色边框是由溢出引起的：在我没有注意到的跨度上可见。现在我真的很讨厌那些写 CSS 的人。

我很高兴它有帮助:)