Браузеры и устройства
Узнайте о браузерах и устройствах, от современных до старых, которые поддерживаются Bootstrap, включая известные особенности и ошибки для каждого из них.
Поддерживаемые браузеры
Bootstrap поддерживает последние стабильные версии всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 10-11 / Microsoft Edge .
Альтернативные браузеры, использующие последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) корректно отображаться и работать и в этих браузерах. Более подробная информация о поддержке представлена ниже.
Список поддерживаемых нами браузеров и их версий можно найти в разделе.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 для управления этими версиями браузера. Обратитесь к их документации, чтобы узнать, как интегрировать эти инструменты в ваши проекты.
Мобильные устройства
Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Turbo Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.
| Хром | Fire Fox | Сафари | Android-браузер и веб-просмотр | Microsoft Edge | |
|---|---|---|---|---|---|
| Андроид | Поддерживается | Поддерживается | Н/Д | Поддерживается Android v5.0+ | Поддерживается |
| iOS | Поддерживается | Поддерживается | Поддерживается | Н/Д | Поддерживается |
| Виндовс 10 Мобильный | Н/Д | Н/Д | Н/Д | Н/Д | Поддерживается |
Настольные браузеры
Точно так же поддерживаются последние версии большинства настольных браузеров.
| Хром | Fire Fox | Интернет-проводник | Microsoft Edge | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Мак | Поддерживается | Поддерживается | Н/Д | Поддерживается | Поддерживается | Поддерживается |
| Окна | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, в дополнение к последнему обычному стабильному выпуску, мы также поддерживаем последнюю версию Firefox с расширенной поддержкой (ESR) .
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми приходится бороться Bootstrap, см. на нашей Стене ошибок браузера .
Интернет-проводник
Поддерживается Internet Explorer 10+; IE9 и ниже нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют префиксных свойств для полной функциональности. Посетите страницу Могу ли я использовать… для получения подробной информации о поддержке браузерами функций CSS3 и HTML5. Если вам требуется поддержка IE8-9, используйте Bootstrap 3.
Модальные окна и раскрывающиеся списки на мобильных устройствах
Переполнение и прокрутка
Поддержка элемента overflow: hidden;on <body>весьма ограничена в iOS и Android. С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального окна в браузерах любого из этих устройств, <body>содержимое начинает прокручиваться. См. ошибку Chrome № 175502 (исправлена в Chrome v40) и ошибку WebKit № 153852 .
Текстовые поля iOS и прокрутка
Начиная с iOS 9.2, когда модальное окно открыто, если начальное касание жеста прокрутки находится в пределах границ текстового <input>или a <textarea>, <body>содержимое под модальным окном будет прокручиваться вместо самого модального окна. См. ошибку WebKit № 153856 .
Выпадающие списки навигации
Этот .dropdown-backdropэлемент не используется в iOS в навигации из-за сложности z-индексации. Таким образом, чтобы закрыть раскрывающиеся списки на панелях навигации, вы должны напрямую щелкнуть элемент раскрывающегося списка (или любой другой элемент, который вызовет событие щелчка в iOS ).
Масштабирование в браузере
Масштабирование страницы неизбежно приводит к появлению артефактов рендеринга в некоторых компонентах, как в Bootstrap, так и в остальной части Интернета. В зависимости от проблемы мы можем ее исправить (сначала найдите, а затем, если нужно, откройте проблему). Тем не менее, мы склонны игнорировать их, поскольку они часто не имеют прямого решения, кроме хакерских обходных путей.
Прилеплено :hover/ :focusна iOS
Хотя :hoverэто невозможно на большинстве сенсорных устройств, iOS эмулирует это поведение, что приводит к «липким» стилям наведения, которые сохраняются после касания одного элемента. Эти стили наведения удаляются только тогда, когда пользователи касаются другого элемента. Такое поведение считается в значительной степени нежелательным и, по-видимому, не является проблемой на устройствах Android или Windows.
В наши альфа- и бета-версии версии 4 мы включили неполный и закомментированный код для выбора прокладки медиа-запроса, которая отключала бы стили наведения в браузерах сенсорных устройств, которые эмулируют наведение. Эта работа никогда не была полностью завершена или включена, но, чтобы избежать полной поломки, мы решили отказаться от этой прокладки и оставить примеси в качестве ярлыков для псевдоклассов.
Печать
Даже в некоторых современных браузерах печать может быть причудливой.
Начиная с Safari v8.0, использование класса фиксированной ширины .containerможет привести к тому, что Safari будет использовать необычно маленький размер шрифта при печати. Дополнительные сведения см. в выпуске № 14868 и ошибке WebKit № 138192 . Одним из возможных обходных путей является следующий CSS:
@media print {
.container {
width: auto;
}
}
Стандартный браузер Android
Из коробки Android 4.1 (и, по-видимому, даже некоторые более новые версии) поставляются с приложением «Браузер» в качестве веб-браузера по умолчанию (в отличие от 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 в нескольких местах, чтобы нацелить специальный CSS на определенные версии браузера, чтобы обойти ошибки в самих браузерах. Эти хаки по понятным причинам заставляют валидаторов CSS жаловаться на то, что они недействительны. В нескольких местах мы также используем передовые функции CSS, которые еще не полностью стандартизированы, но они используются исключительно для прогрессивного улучшения.
Эти предупреждения проверки не имеют значения на практике, поскольку нехакерская часть нашего CSS полностью проверяется, а хакерская часть не мешает правильному функционированию нехакерской части, поэтому мы намеренно игнорируем эти конкретные предупреждения.
Наши документы HTML также содержат некоторые тривиальные и несущественные предупреждения проверки HTML из-за того, что мы включили обходной путь для определенной ошибки Firefox .