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

Question

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

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

我的视口(viewport)是:

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

我该怎么办？

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 .由于您没有提供任何代码，所以这是我所能提供的尽可能多的帮助。但我觉得这已经足够了。 calc()在支持 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所以你不必手动删除  从你的标记中，但我必须指出他们不应该首先出现在那里。您可以轻松地在价格中添加一个简单的 padding-left <span>