Cмотреть на GitHub

Браузеры и устройства

Узнайте больше о браузерах и устройствах всех видов, которые поддерживаются Bootstrap и об известных особенностях и багах для каждого из них.

Поддерживаемые браузеры

Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.

Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko поддерживается, но не полностью. Однако и в них BS4 должен отображаться и работать корректно. Более точная информация – ниже.

Здесь вы можете найти версии поддерживаемых браузеров в файле .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 с использованием Browserslist для взаимодействия и управления версиями браузеров. Смотрите документацию для получения информации по их внедрению в ваши проекты.

Мобильные устройства

В общем, BS4 поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как 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 Нет Нет Нет Нет Поддерживается

Настольные браузеры

Аналогично, последние версии большинства таковых браузеров поддерживаемы.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Поддерживается Поддерживается Нет Нет Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается, IE10+ Поддерживается Поддерживается Не поддерживается

Для Firefox, дополняя поддержку последнего стабильного релиза, BS4 также поддерживает последний релиз Firefox с «расширенной поддержкой» - Extended Support Release (ESR).

Предположительно BS4 должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.

Для получения списка некоторых «багов» браузеров, с которыми довольно трудно бороться, загляните на стену «багов».

Internet Explorer

Поддерживается Internet Explorer 10+; IE9 и ниже нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют свойств с префиксом для полной функциональности. Посетите Могу ли я использовать… для получения подробной информации о поддержке браузером функций CSS3 и HTML5. Если Вам требуется поддержка IE8-9, используйте Bootstrap 3.

Всплывающие окна и выпадающие меню на мобильниках

Прокрутка и отображение содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Поддержка свойства 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).

«Зум» в браузере

Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов BS4 и остальной страницы. В зависимости от вида проблемы, мы можем «починить» этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.

«Липкий» :hover/:focus на iOS

Хотя реальный :hover невозможен на большинстве сенсорных устройств, iOS эмулирует это поведение, что приводит к появлению «липких» стилей наведения мыши, которые сохраняются после нажатия одного элемента. Эти стили наведения удаляются только тогда, когда пользователи касаются другого элемента. Такое поведение считается в значительной степени нежелательным и, по-видимому, не является проблемой на устройствах Android или Windows.

Во всех наших альфа- и бета-версиях v4 мы включали неполный и закомментированный код для включения в оболочку медиа-запроса, которая отключала бы стили наведения в браузерах сенсорных устройств, эмулирующих зависание. Эта работа никогда не была полностью завершена или включена, но во избежание полного отказа мы решили отказаться от этой прокладки и оставить миксины в качестве ярлыков для псевдоклассов.

Печать

Даже в современных браузерах она может вызвать проблемы.

Что касается 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 к определенным версиям браузеров и исправления «багов» в самих браузерах, BS4 иногда использует CSS browser hacks. Эти «хаки» по понятным причинам заставляют «ругаться» валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.

Эти «ругательства» валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.

Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.