Совсем недавно достался в рабту проект построенный на системе сеток от Bootstrap. В третьей версии этого популярного фреймворка есть несколько хитрых особоенностей.
Особенности сетки bootstrap 3
- Ipad Bug #10723
- применение сетки на нескольких размерах экранов
Хотелось бы иметь в распоряжении пару вариантов копии Vertu как здесь. Т.к. тестить на подобных девайсах нужно. Конечно крайне редко. Но бывают заказы когда необходима поддержка всех устройств. Еще очень интересно какой особенность будет обладать имейл клиент на таких девайсах. В 90% случаев моя задача не только верстать статичные страницы но и вести разработку имейш шаблонов. С поддержкой всех возможных экранов. Для большинства такаие требования покажутся несопоставимыми для уровня задачь. Но бывают клиенты с требованиями более жесткими 100%.
После того как была построенна страница. Мы приступили к тестированию. В итоге оказалось что адапативность сетки нарушается на Айпадах. В Сафари браузерах есть опреледённая проблема математического характера.
Всё из-за математики;)
Увы, но разработчики Bootstrap не учитывали, что Apple будет обрабатывать числа в совершенно ином порядке.
bootstrap построен на сетке в 12 частей на каждой строке class=»row». Каждая из 12 частей имеет фик значение в процентах от общего контейнера. Чтобы вывести полноценно адаптивный блок достаточно поставить несколько див блоков в ряд с применением классов col-*
И на iPad данный аспект приобретает грубое округление значений процентов. На github приведен пример для исправления процентов для айпада
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: @screen-tablet) { ::i-block-chrome, .row.safari-fix { display:table!important; } ::i-block-chrome, .row.safari-fix [class*="col-"] { display:table-cell!important; float:none!important; width:auto!important; padding-left:2%!important; padding-right:2%!important; } }
Но он может не работать в паре с вашим кодом, т.к. бывает что над проектом работало несколько человек либо сам bootstrap был подготовлен препроцессором для работы с шаблонами сайта.
Решение которое помогло мне
одеть строку с разделением классов col-* в div class = «container-fluid»
Что случилось по моему мнению — процентное значение ширины класса fluid заставило пересчитать сетку на ipad. В итоге адапатвиность вернулась!
Если у Вас были трудности с построением сеток на bootstrap 3 пишите попробуем победить эту очень продуктивную и популярную систему разметки.