Android 的默认浏览器,显示我的站点更宽并创建水平滚动条。
这里是问题的屏幕截图:(Chrome 与默认浏览器)
我的视口(viewport)是:
<meta name="viewport" content="width=device-width, initial-scale=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>
关于Android 默认浏览器为响应式设计创建水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42853114/