Question

在Android 4.1上，Opera Mini 33不支持css flex布局。它确实使用旧的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，但它显然没有。

有人遇到过这个问题吗？在数据保存模式之间切换似乎是一种选择，灵活地在模式＆＃34;极端＆＃34;但在所有其他3种模式中，它并没有。我重新安装了Opera，甚至把系统搞砸了 - 没有变化。

如何在Android 4.1上打破Opera Mini中的弹性线？这是我的实际代码：

<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%;
}

Answer 1

似乎没有人知道答案，所以我分享了我的解决方案。如果浏览器支持flex-wrap，则可以通过JS检测部分解决方案，然后向主体添加一个类并为其创建单独的样式。

这是进行检测的唯一方法，因为其中的Opera Mini包括＆＃34; Opera Mini＆＃34;仅限于＆＃34; Extreme＆＃34;模式数据保存，任何其他案例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'
}

取自这个答案：https://stackoverflow.com/a/27047981/2796533

Opera Mini flex不包装

1 个答案: