Браузеры и устройства
Узнайте больше о браузерах и устройствах всех видов, которые поддерживаются Bootstrap и об известных особенностях и багах для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает последние стабильные выпуски всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 10-11 / Microsoft Edge.
Альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) правильно отображаться и работать в этих браузерах. Более конкретная информация о поддержке представлена ниже.
Вы можете найти список поддерживаемых нами браузеров и их версии в нашем файле .browserslistrc:
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Мы используем Autoprefixer для обработки поддержки браузера через префиксы CSS с использованием Browserslist для взаимодействия и управления версиями браузеров. Смотрите документацию для получения информации по их внедрению в ваши проекты.
Мобильные устройства
Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) не поддерживаются.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Поддерживается | Поддерживается | Нет данных | Android v5.0+ supported | Поддерживается |
| iOS | Поддерживается | Поддерживается | Поддерживается | Нет данных | Поддерживается |
| Windows 10 Mobile | Нет данных | Нет данных | Нет данных | Нет данных | Поддерживается |
Настольные браузеры
Точно так же поддерживаются последние версии большинства настольных браузеров.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Поддерживается | Поддерживается | Нет данных | Поддерживается | Поддерживается | Поддерживается |
| Windows | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, помимо последней нормальной стабильной версии, мы также поддерживаем последнюю версию Firefox Extended Support Release (ESR).
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, см. в нашей стене ошибок браузера.
Internet Explorer
Поддерживается Internet Explorer 10+; IE9 и ниже нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют свойств с префиксом для полной функциональности. Посетите Могу ли я использовать… для получения подробной информации о поддержке браузером функций CSS3 и HTML5. Если Вам требуется поддержка IE8-9, используйте Bootstrap 3.
Модальные окна и раскрывающиеся списки на мобильных устройствах
Переполнение и прокрутка
Поддержка overflow: hidden; в элементе <body> весьма ограничена в iOS и Android. С этой целью, когда Вы прокручиваете верхнюю или нижнюю часть модального окна в браузере любого из этих устройств, содержимое <body> начинает прокручиваться. См. Ошибка Chrome #175502 (исправлена в Chrome v40) и Ошибка WebKit #153852.
Текстовые поля и прокрутка в iOS
Начиная с iOS 9.2, пока модальное окно открыто, если начальное прикосновение жеста прокрутки находится в пределах текстового <input> или <textarea>, содержимое <body> под модальным окном будет будет прокручиваться вместо самого модального окна. См. Ошибка WebKit #153856.
Выпадающие элементы навигационной панели
Элемент .dropdown-backdrop не используется в навигационной панели iOS из-за сложности z-indexing. Таким образом, чтобы закрыть раскрывающиеся списки на панели навигации, Вы должны непосредственно щелкнуть элемент раскрывающегося списка (или любой другой элемент, который вызовет событие щелчка в iOS).
Масштабирование в браузере
Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов Bootstrap и остальной страницы. В зависимости от вида проблемы, мы можем «починить» этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.
Прикрепление :hover/:focus на iOS
Хотя реальный :hover невозможен на большинстве сенсорных устройств, iOS эмулирует это поведение, что приводит к появлению «липких» стилей наведения мыши, которые сохраняются после нажатия одного элемента. Эти стили наведения удаляются только тогда, когда пользователи касаются другого элемента. Такое поведение считается в значительной степени нежелательным и, по-видимому, не является проблемой на устройствах Android или Windows.
Во всех наших альфа- и бета-версиях v4 мы включали неполный и закомментированный код для включения в оболочку медиа-запроса, которая отключала бы стили наведения в браузерах сенсорных устройств, эмулирующих зависание. Эта работа никогда не была полностью завершена или включена, но во избежание полного отказа мы решили отказаться от этой прокладки и оставить миксины в качестве ярлыков для псевдоклассов.
Печать
Даже в современных браузерах печать может вызвать проблемы.
Начиная с Safari v8.0 использование класса .container с фиксированной шириной может привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Смотрите issue issue #14868 и WebKit bug #138192. Один из возможных способов обхода - следующий CSS:
@media print {
.container {
width: auto;
}
}
Стандартный Android-браузер
По умолчанию Android 4.1 (и даже некоторые его более новые релизы) поставляются с браузером-приложением по умолчанию (в отличие Chrome). К сожалению, это приложение содержит множество «багов» и несоответствий с CSS в целом.
Меню выбора
По элементам <select>: встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен border-radius и\или border. (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента <select> встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Хотите увидеть пример? Посмотрите демонстрацию JS Bin.
Валидаторы
Для обеспечения максимального удобства работы старых браузеров и браузеров с ошибками и для того, чтобы обойти эти ошибки в самих браузерах, Bootstrap использует настройки CSS. В некоторых случаях мы также используем передовые функции CSS, которые еще не полностью стандартизированы, но используются исключительно для прогрессивного улучшения.
Подобные предупреждения валидатора о проверке не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.
В наших HTML-документах также есть несколько тривиальных и несущественных предупреждений проверки HTML из-за того, что мы включили некоторые обходные пути «костыли» для исправления определенного «бага» в Firefox.