Flexbox игнорируется на мобильном телефоне

Question

Я использовал flexbox для распространения элементов списка в навигации нижнего колонтитула по ширине нижнего колонтитула.

Это отображается в моем браузере, а также в мобильной эмуляции Chrome. Однако это проигнорировано на любом мобильном устройстве Я тестировал (iPhone, iPad, планшет Samsung).

Кто-нибудь видит что-то явно неправильное с кодом, о котором я не знаю? Ниже приведен фрагмент CSS/LESS, который я использую.

ul { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    padding: 0; 

    li { 
     padding: 0; 
    } 
} 

Answer 1

Это происходит, как display:flex & justify-content: space-between не совместимы во всех видах browsers.So мы должны иметь кросс-браузерный CSS, как это:

ul { 

    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-justify-content: space-between; 
    justify-content: space-between; 

    width: 100%; 
    padding: 0; 

    li { 
     padding: 0; 
    } 
}