Браузеры и устройства
Узнайте больше о браузерах и устройствах всех видов, которые поддерживаются Bootstrap и об известных багах для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.
Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko, не поддерживаются полностью. Однако и в них Bootstrap должен отображаться и работать корректно. Более точная информация – ниже.
Вы можете найти поддерживаемые браузеры с указанием версий в in our .browserslistrc file:
# 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. Autoprefixer использует 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+ Поддерживается | Поддерживается |
| iOS | Поддерживается | Поддерживается | Поддерживается | Нет | Поддерживается |
| Windows 10 Mobile | Нет | Нет | Нет | Нет | Поддерживается |
Браузеры PC
Аналогично, последние версии большинства таковых браузеров поддерживаемы.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Поддерживается | Поддерживается | Нет | Нет | Поддерживается | Поддерживается |
| Windows | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, дополняя поддержку последнего стабильного релиза, Bootstrap также поддерживает последний релиз Firefox с расширенной поддержкой - Extended Support Release (ESR).
Предположительно Bootstrap должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.
Для получения списка некоторых багов браузеров, с которыми довольно трудно бороться, загляните на стену багов.
Internet Explorer
IE 10+ поддерживаются, IE9 и ниже – нет. Знайте, что некоторые свойства CSS3 и элементы HTML5 поддерживаются не полностью в IE10, или требуют предустановленных свойств для нормальной работы. Посетите Can I use… для подробностей по поддержке браузерами свойств CSS3 и HTML5.
Если вам потребуется поддержка IE8-9, пользуйтесь v3. Это наиболее стабильная версия и она все еще поддерживается нашей командой в наиболее критических случаях. Версия Bootstrap 3.4.0 вышла 13 декабря 2018 г.
Всплывающие окна и выпадающие меню на мобильниках
Прокрутка и отображение содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Поддержка свойства overflow:hidden; достаточно ограничена в iOS и Андроидах. По этой причине, когда вы прокручиваете ниже верха или низа всплывающего окна в этих устройствах, содержимое <body> начнет прокручиваться. Смотрите Chrome bug #175502 (решено в Chrome v40) и WebKit bug #153852.
Текстовые поля и прокрутка в iOS
Что касается iOS 9.2, - пока всплывающее окно открыто – если начальное касание жеста прокрутки происходит внутри границ <input> или <textarea>, прокручиваться вместо окна будет содержимое <body>. Смотри WebKit bug #153856.
Выпадающие элементы навигационной панели
Элемент .dropdown-backdrop не используется на iOS в навигационной панели из-за сложности z-индексирования. Таким образом, чтобы закрыть выпадающий элемент, необходимо коснуться его (или другой элемент, который вызовет событие клик в iOS).
Zoom в браузере
Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов Bootstrap и остальной страницы. В зависимости от вида проблемы, мы можем починить этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.
Липкий :hover/:focus на iOS
Хотя реальный hover невозможен на большинстве тачскринов, iOS эмулирует это поведение, что приводит к «липким» стилям наведения, которые сохраняются после нажатия на один элемент. Эти стили наведения удаляются только при нажатии пользователем другого элемента. Это поведение считается в значительной степени нежелательным и, как представляется, не является проблемой на устройствах Android или Windows.
Во всех наших выпусках V4alpha и beta мы включили неполный и закомментированный код для выбора в оболочку запроса мультимедиа,которая отключит стили наведения в браузерах сенсорных устройств, которые эмулируют наведение. Эта работа никогда не была полностью завершена или включена, но чтобы избежать полного обрыва, мы решили отказаться от этой прокладки и сохранить миксины в качестве ярлыков для псевдоклассов.
Печать
Даже в современных браузерах она может вызвать проблемы.
Что касается Safari v8.0 – использование класса с фиксированной шириной .container может заставить браузер использовать необычно мелкий шрифт при печати. Смотрите issue issue #14868 и WebKit bug #138192. Есть еще один обход этого бага (код внизу):
@media print {
.container {
width: auto;
}
}Встроенный браузер Андроида
По умолчанию 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 demo.
Валидаторы
Для обеспечения наилучшей работы на старых и глючных браузерах для применения определенных настроек CSS к определенным версиям браузеров и исправления багов в самих браузерах, Bootstrap иногда использует CSS browser hacks. Эти хаки по понятным причинам заставляют ругаться валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.
Эти предупреждения валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а хаки не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.
Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.