Начал делать адаптивную верстку для своего проекта whister.websozidatel.ru/. Дошел до мобилок, разрешение около 744 пикселей. Протестировал на телефоне Samsung Galaxy Grand 2. И оказалось что flex-box верстка вообще как бы игнорируется этим телефоном. А просматривая тем же www.responsinator.com/?url=http%3A%2F%2Fwhister.we... все нормально отображается.
Почему так? И что можно сделать в этом случае?
keche:
Посмотрите caniuse
Все андроиды поддерживают флексы, но старые только с перфиксами. У флексов столько префиксов, что запаритесь вручную расставлять.
Вы еще на яблочных компах не смотрели, там тоже флексы едут без префиксов.
Верстка сайта whister.websozidatel.ru отображается нормально на всех новых браузерах, в том числе и на мобильном google chrome для андроид на телефоне samsung galaxy grand 2 duos. А вот стандартном браузере, отображается все нормально кроме блоков "Преимущества велосипеда Whister Elite" и "Процесс доставки велосипедов".
В преимуществах сжимаются картинки иконок , и чем больше текста в блоке, тем сильнее деформируется картинка. Если например картинки обернуть в блок div, то картинка принимает свой нормальный размер, а текст просто налазит поверх этих картинок.
В доставке блок выравнивается не по центру , хотя задано свойство justify-content: center для контейнера.
Пользовался автопрефиксером https://autoprefixer.github.io/ru/, чтобы адаптировать сайт под старые версии мобильных браузеров.
Нифига автопрефиксер не помогает, когда речь доходит до мобилок. Поддержка flex на мобилках - полное гавно. Грёбаный ios вообще flex wrap не воспринимает. Я уже не говорю о телефонах непонятной марки.
А как проще делать тогда обычными float? Или на фреймворке? Которые кстати сделаны для стандартных задач, типа сделать админку. Ведь стили придется переопределять?
keche: Вы для начала подумайте - действительно вам нужна поддержка на таком старом девайсе в старинном браузере. В том же хроме на вашем же телефоне все будет ок. Телефону уже более 2.5 лет - для андроидов это довольно большой срок.
Если всё таки захотите пинать говно динозавра - выбор у вас небольшой. Либо inline-block, либо float.
, и чем больше текста в блоке, тем сильнее деформируется картинка. Если например картинки обернуть в блок div, то картинка принимает свой нормальный размер, а текст просто налазит поверх этих картинок.
, хотя задано свойство justify-content: center для контейнера.
