Столкнулся с каким-то странным поведением после тестирования моего адаптивного веб-сайта на мобильных устройствах и надеюсь, что смогу получить некоторое представление о том, что происходит. По сути, у меня есть одна строка начальной загрузки, содержащая 23 изображения. На моем iPhone с разрешением (375 x 667) я вижу разные результаты с отображением строки по сравнению с настольным браузером, настроенным на это разрешение.
Моя цель состоит в том, чтобы изображения отображались бок о бок попарно до последней строки, которая будет иметь центрированное изображение. В дополнение к стандартному классу строк начальной загрузки я также добавил класс flex, который использует следующий css:
.flex {
display: flex;
justify-content: center;
flex-flow: row wrap;
position: relative;
}
HTML похож на это:
<div class="row flex">
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
<div class="customColumn">
<img src="some-image" class="img-responsive some-image-class" alt="some alt"/>
</div>
</div>
На рабочем столе, независимо от того, насколько мал я делаю экран, изображения отображаются так, как ожидалось. По какой-то причине на мобильном устройстве первое изображение в группе отображается само по себе, а изображения после него отображаются парами.
Почему такое поведение дисплея должно быть противоположным для настольных компьютеров и мобильных устройств?
CodePen показывает ожидаемое поведение: codepen.io/anon/pen/jZWGNj. Проблема в том, что на мобильных устройствах (iPhone, Android, iPad) это ведет себя совершенно иначе.
Изменить: я просто хочу уточнить, что «настраиваемые столбцы» в этом случае - это просто стандартные столбцы начальной загрузки в отношении значений ширины.
