В Android 4.1 Opera Mini 33 не поддерживает гибкую компоновку css. Он действительно использует старый гибкий стандарт 2009 года (отображение: -webkit-box) кроме боксов: несколько;
Не могу разорвать гибкую линию, ничего не работает:
box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;
На других устройствах Android (7) соблюдается новый синтаксис гибкости: flex-wrap: wrap; Caniuse.com показывает, что Opera Mini поддерживает гибкость, но это явно не так.
Кто-нибудь сталкивался с этой проблемой? Переключение между режимами сохранения данных, похоже, является опцией, флекс идеально работает в режиме "Extreme", но во всех остальных трех режимах - нет. Я переустановил Оперу, даже стер систему - без изменений.
Как разорвать гибкую линию в Opera Mini на Android 4.1? Это мой актуальный код:
<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%;
}
Кажется, никто не знает ответа, поэтому я делюсь своим решением. Частичное решение может быть обнаружено JS, если браузер поддерживает flex-wrap, а затем добавить класс в тело и создать для этого отдельные стили.
Это единственный способ выполнить обнаружение, потому что Opera Mini в своем агенте пользователя включает «Opera Mini» только при сохранении данных в «Экстремальном» режиме, в любом другом случае Opera Mini отображается как Opera Mobile (но на самом деле Opera Mobile отлично работает с новейшим шлейфом). ).
Этого простого кода достаточно, чтобы обнаружить поддержку 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