Узнайте о браузерах и устройствах, от современных до старых, которые поддерживаются 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 эмулирует это поведение, что приводит к «sticky» стилям наведения, которые сохраняются после касания одного элемента. Эти стили наведения удаляются только тогда, когда пользователи касаются другого элемента. Такое поведение считается в основном нежелательным и, похоже, не является проблемой для устройств Android или Windows.
В наши альфа- и бета-версии v4 мы включали неполный и закомментированный код для включения прокладки медиа-запросов, которая отключала бы стили наведения в браузерах сенсорных устройств, которые имитируют наведение. Эта работа никогда не была полностью завершена или включена, но, чтобы избежать полной поломки, мы решили исключить эту прокладку и оставить миксины как ярлыки для псевдоклассы.
Печать
Даже в некоторых современных браузерах печать может быть необычной.
Начиная с Safari v8.0, использование класса .container фиксированной ширины может привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Дополнительные сведения см. в issue #14868 и Ошибка WebKit #138192. Один из возможных способов обхода - следующий CSS:
@media print {
.container {
width: auto;
}
}
Стандартный Android-браузер
По умолчанию Android 4.1 (и даже некоторые более новые версии) поставляются с приложением Browser в качестве предпочтительного веб-браузера по умолчанию (в отличие от Chrome). К сожалению, в приложении “Браузер” много ошибок и несоответствий с CSS в целом.
Меню выбора
В элементах <select> стандартный браузер Android не будет отображать боковые элементы управления, если применены параметры border-radius и/или border. (См. этот вопрос на StackOverflow для получения подробной информации.) Используйте приведенный ниже фрагмент кода, чтобы удалить вызывающий нарушение CSS и отобразить <select> как нестилизованный элемент в браузере Android. Сниффинг пользовательского агента позволяет избежать вмешательства в работу браузеров 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 browser hacks в нескольких местах для нацеливания специального CSS на определенные версии браузера, чтобы обойти ошибки в сами браузеры. Эти хаки по понятным причинам заставляют валидаторов CSS жаловаться на их недействительность. В некоторых случаях мы также используем передовые функции CSS, которые еще не полностью стандартизированы, но используются исключительно для прогрессивного улучшения.
Эти предупреждения о проверке не имеют значения на практике, поскольку не-хакерская часть нашего CSS действительно полностью проверяет, а хакерские части не мешают правильному функционированию не-хакерской части, поэтому мы сознательно игнорируем эти конкретные предупреждения.
В наших HTML-документах также есть несколько тривиальных и несущественных предупреждений проверки HTML из-за того, что мы включили обходной путь для определенной ошибки Firefox.