Android 默认浏览器为响应式设计创建水平滚动条

Question

Android 的默认浏览器，显示我的站点更宽并创建水平滚动条。

这里是问题的截图：（Chrome 对比默认浏览器）

我的视口是：

<meta name="viewport" content="width=device-width, initial-scale=1">

我该怎么办？

Answer 1

我没有 Andriod 浏览器来测试这个，但你可以尝试为搜索设置最大宽度 div，例如

#search-bar-mobile {
    max-width: 70%;
}

这很容易做到，如果对您有帮助，您可以优化尺寸。

Answer 2

您要做的第一件事是在 Chrome 中设置移动调试并连接您的 Android 设备。 Google 在此处提供了详细说明： https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

连接好设备后，打开开发工具到 'elements' 选项卡。滚动到演示文稿标记所在的 'body' 标记区域。现在只需右键单击 devtools DOM 中的元素并删除它们，直到滚动条消失。最好从 'header-area' 或 'main-content-area' 等主要元素开始。当滚动条消失时，您知道您删除的元素或该元素的子元素正在破坏您的布局。

刷新页面并删除导致滚动条的页面内的元素。如果在删除所有子元素后栏没有消失，您就知道问题出在父元素上。

一旦您知道哪个（或哪些）元素破坏了布局，您就可以在您的开发工具中调整 CSS，然后相应地更改您的源代码。

Answer 3

不幸的是，Android pre-Lollipop 设备上的默认浏览器，不支持 CSS3 的 calc()函数。假设您的搜索输入有 class .search-box 并考虑屏幕截图，您的 CSS 可能包含类似于此的内容：

.search-box {
  ...
  width: calc(100% - 100px);
  ...
}

... 其中 100px 是搜索按钮的宽度。

为了解决这个问题，您需要在上述声明前加上 Android 浏览器可以理解并可以应用的声明：

.search-box {
  ...
  width: 75%;
  width: calc(100% - 100px);
  ...
}

现在，Android 浏览器会将 width: 75% 应用于 .search-box 并跳过它不支持的 calc()，并且按钮将显示在剩余的 25% 中。当然，您可以将其设置为任何其他方便的值，而不是 75%。请记住，pre-Lollipop 设备上的最大 wide-spread 屏幕宽度是 320px。

注意：您的错误 calc() 可能实际上适用于 min-width，而不适用于 width。由于您没有提供任何代码，所以这是我所能提供的尽可能多的帮助。但我觉得这已经足够了。 calc() 问题是支持 pre-Lollipop 默认浏览器时的常见问题。

从您在评论中链接的视频来看，您的问题似乎与上述问题无关，而是由 .content_product_title_and_price_section.

的内容溢出引起的

为了修复它，您可以添加

@media(max-width: 379px){
  .content_product_title_and_price_section h3 {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
  }
}

...但这会隐藏较长产品标题的多余文本。如果您不希望这种情况发生，窄手机的另一种布局是将 flex-wrap:wrap 添加到 .content_product_title_and_price_section，也在 379px 下。为此，您可能需要稍微调整图像标题的布局。这可能有效：

@media(max-width: 379px){
  .content_product_title_and_price_section {
     flex-direction: column;
     align-items: center;
     text-align: center;
  }
  .content_product_title_and_price_section h3 {
     margin-bottom: -2rem;
  }
}

我添加了 margin-bottom，因此您不必从标记中手动删除  ，但我必须指出，它们一开始就不应该存在。您本可以轻松地在价格 <span> 中添加一个简单的 padding-left。

Answer 4

您的 .content_product_title_and_price_section 上的 display: flex; 属性有问题。如果禁用除 display: -webkit-box; 之外的所有 display 设置，则可以在 firefox 中重现确切的行为。我会删除这个旧的 -webkit-box 并只使用 -webkit-flex，或者尝试在 h3 和跨度上使用 display: inline-block 实现相同的效果并向 h3 添加 width: 75%和 vertical-align: top 两者。

Android 默认浏览器为响应式设计创建水平滚动条

Android Default Browser creates Horizontal Scroll Bar for Responsive Design

css

browser

android

viewport

responsive-design