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

Question

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

这是问题的屏幕截图:( Chrome与默认浏览器)

我的视口是:

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

我该怎么办？

Answer 1

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

.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()实际上可能适用于 a min-width，而不是 a width。由于您没有提供任何代码，这就是我能提供的尽可能多的帮助。但我的印象是这已经足够了。在支持 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因此您不必手动 从标记中删除 ，但我必须指出它们一开始就不应该存在。您可以轻松地在 Price 中添加一个简单的 padding-left <span>。