【问题标题】: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 explanationwidth: 100%; 切换为width: auto;
  • 这可能是由于各种原因而发生的。调试的一种方法是在页面注释上逐段注释,如标题、主要内容、侧边栏等,然后在移动设备上检查,然后您可能会发现哪段代码有问题

标签: android jquery html ios css


【解决方案1】:

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

【讨论】:

  • 我很好奇!但是如何在计算机上检查移动浏览器屏幕,请您详细解释一下
  • 当然。您必须在您的手机上打开一个页面,将您的手机与计算机连接并安装this plugin for Chrome。然后你午餐插件,这就是全部 - 你可以检查在你的手机上打开的网页。它看起来像在第三张照片上。
  • 我将您的答案设置为正确答案,因为它对我帮助最大。我知道 USB 调试,但没有意识到它向我展示了手机上的所有 HTML 元素。白色边框是由溢出引起的:在我没有注意到的跨度上可见。现在我真的很讨厌那些写 CSS 的人。
  • 我很高兴它有帮助:)