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

Question

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

此处显示问题的屏幕截图:( Chrome与默认浏览器）

我的视口是：

<Volcalc height={10} width={10} />

我该怎么办？

Answer 1

不幸的是，Lollipop设备上的Android默认浏览器，不支持CSS3的 calc() 功能。假设您的搜索输入具有类.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%之外，您可以将其设置为任何其他方便的值。请记住，前Lollipop设备上最广泛的屏幕宽度为320px。

注意：您的错误calc()可能实际适用于min-width，而不是width。由于您还没有提供任何代码，因此我可以提供尽可能多的帮助。但我的印象还不够。支持pre-Lollipop默认浏览器时，calc()问题很常见。

根据您在评论中链接的视频，您的问题看起来与上述内容无关，但这是由.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>。

快乐的编码！ ::}＆lt;（（（*＆gt; ::）

Answer 2

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

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

这很容易做到，如果它可以帮助你改进尺寸。

祝你好运

Answer 3

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

将设备连接起来后，将开发工具打开到＆＃39;元素＆＃39;标签。滚动到＆＃39;身体＆＃39;标记区域，您的演示文稿标记。现在只需右键单击devtools DOM中的元素并删除它们，直到滚动条消失。最好从主要元素开始，如标题区域＆＃39;或者＆＃39;主要内容区域＆＃39;。当滚动条消失时，您知道您删除的元素或该元素的子元素正在破坏您的布局。

刷新页面并删除导致滚动条的元素。如果在删除所有子元素时条形图不会消失，则您知道问题是父元素。

一旦您知道哪个元素（或多个元素）打破了布局，您就可以调整devtool中的CSS，然后相应地更改源代码。

Answer 4

display: flex;上的.content_product_title_and_price_section媒体资源存在问题。如果禁用除display之外的所有display: -webkit-box;设置，则可以在firefox中重现确切的行为。我会删除旧版-webkit-box并仅使用-webkit-flex，或尝试使用display: inline-block在h3和span上实现相同的效果，并在h3中添加width: 75%和vertical-align: top两者。