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

Posted 2023-03-06

【中文标题】Android 默认浏览器为响应式设计创建水平滚动条

【英文标题】：Android Default Browser creates Horizontal Scroll Bar for Responsive Design

【发布时间】：2017-08-08 18:01:29

【问题描述】：

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

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

我的视口是：

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

我该怎么办？

【问题讨论】：

您的网站是用 html5 和 css3 构建的，还是在 js 中使用 es6 来改变或创建您的设计？你能分享你的HTML代码吗

@AnkitArora 该网站是 wordpress 4.7.4，我所做的一切都是更新当前的 css 和 php 文件。由于html是用核心wordpress的php文件创建的，我不认为我可以共享html代码，但我相信可以从页面源代码中检查css问题，使用开发人员工具。我很困惑为什么你需要 html 代码。

抱歉，一开始没有看到问题中的 URL，HTML5 和 CSS3 中的一些元素尚未被 android 默认浏览器支持，所以我想检查一下您是否使用过其中一个这些元素与否。您可以使用caniuse.com/# 来验证是否支持您在网站上使用的元素

【参考方案1】：

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

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

这很容易做到，如果它有助于您调整尺寸。

【参考方案2】：

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

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

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

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

【讨论】：

您好，该网站在谷歌浏览器上运行良好，如上图所示。我将如何使用这种方法测试“android 默认浏览器”问题？是不是有什么误会？

设置远程调试后，您可以在 Chrome 浏览器中实时检查 Android 设备上的内容。这使您可以访问通常用于调试网站的所有开发人员工具，但您可以将它们用于您的 Android 设备视口，以跟踪问题元素并进行调整。这是另一个有类似问题的帖子。我刚刚发现另一个可能更清楚的帖子：***.com/questions/2314886/…

【参考方案3】：

不幸的是，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()问题在支持pre-Lollipop默认浏览器时很常见。

---

从你在cmets中链接的视频来看，你的问题似乎与上述无关，而是.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>s 中添加一个简单的 padding-left。

【讨论】：

您好 Andrei，感谢您的详细回答，但即使我从网站上删除了搜索栏，同样的行为仍在继续。我认为这与搜索栏和 calc() 函数无关。

@HOY 您所描述的问题无法在您链接的网站上重现。有什么办法可以检查吗？我相信我可以提供帮助。

嗨，Andrei，我使用的是三星 Galaxy s7，我的浏览器是默认浏览器。您可以查看我几分钟前录制的这段视频。 drive.google.com/file/d/0BwHDkPOX-lRtWUtZNmVleGZYbE0/…

@HOY，我已经更新了我的答案。看来您的问题与菜单无关。 :)

第一个不起作用，我不知道为什么。第二个有效，但不完全是我需要的。我正在尝试产生类似于以下网站的影响：www.redbubble.com。

【参考方案4】：

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