Opera Mini flex без упаковки

В 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%;
}
1
0
690
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кажется, никто не знает ответа, поэтому я делюсь своим решением. Частичное решение может быть обнаружено 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

Другие вопросы по теме