Opera Mini flex 不换行
Opera Mini flex not wrapping
在 Android 4.1 上,Opera Mini 33 不支持 css 弹性布局。它确实使用旧的 2009 flex 标准(显示:-webkit-box)除了框线:多个;
我无法断开柔性线,没有任何效果:
box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
在其他方面 Android (7) 它遵循新的 flex 语法,使用 flex-wrap: wrap; Caniuse.com 表明 Opera Mini 支持 flex,但显然不支持。
有人遇到过这个问题吗?在数据保存模式之间切换似乎是一个选项,flex 在 "Extreme" 模式下工作得很好,但在所有其他 3 种模式下它没有。我已经重新安装了 Opera,甚至清除了系统 - 没有任何变化。
如何在 Android 4.1 的 Opera Mini 中断开 flex 线?
这是我的实际代码:
<div class="test">
<div></div>
<div></div>
<div></div>
</div>
.test {
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 300px;
margin: 100px auto;
width: 600px;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
}
.test > div {
width: 100px;
flex-grow: 1;
background: pink;
height: 200px;
}
.test > div:nth-child(2) {
background: yellow;
}
.test > div:last-of-type {
background: blue;
width: 100%;
}
似乎没有人知道答案,所以我分享我的解决方案。
如果浏览器支持 flex-wrap,则可以通过 JS 检测部分解决方案,然后在正文中添加一个 class 并为其制作单独的样式。
这是进行检测的唯一方法,因为 Opera Mini 在它的用户代理中包括 "Opera Mini" 仅在 "Extreme" 模式数据保存,任何其他情况 Opera Mini 显示为 Opera Mobile(但实际上Opera Mobile 与最新的 flex 完美配合。
这个简单的代码足以检测 flex-wrap 支持:
var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}
取自这个答案:
在 Android 4.1 上,Opera Mini 33 不支持 css 弹性布局。它确实使用旧的 2009 flex 标准(显示:-webkit-box)除了框线:多个;
我无法断开柔性线,没有任何效果:
box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
在其他方面 Android (7) 它遵循新的 flex 语法,使用 flex-wrap: wrap; Caniuse.com 表明 Opera Mini 支持 flex,但显然不支持。
有人遇到过这个问题吗?在数据保存模式之间切换似乎是一个选项,flex 在 "Extreme" 模式下工作得很好,但在所有其他 3 种模式下它没有。我已经重新安装了 Opera,甚至清除了系统 - 没有任何变化。
如何在 Android 4.1 的 Opera Mini 中断开 flex 线? 这是我的实际代码:
<div class="test">
<div></div>
<div></div>
<div></div>
</div>
.test {
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 300px;
margin: 100px auto;
width: 600px;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
}
.test > div {
width: 100px;
flex-grow: 1;
background: pink;
height: 200px;
}
.test > div:nth-child(2) {
background: yellow;
}
.test > div:last-of-type {
background: blue;
width: 100%;
}
似乎没有人知道答案,所以我分享我的解决方案。 如果浏览器支持 flex-wrap,则可以通过 JS 检测部分解决方案,然后在正文中添加一个 class 并为其制作单独的样式。
这是进行检测的唯一方法,因为 Opera Mini 在它的用户代理中包括 "Opera Mini" 仅在 "Extreme" 模式数据保存,任何其他情况 Opera Mini 显示为 Opera Mobile(但实际上Opera Mobile 与最新的 flex 完美配合。
这个简单的代码足以检测 flex-wrap 支持:
var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}
取自这个答案: