Браузеры и устройства
Bootstrap поддерживает широкий спектр современных браузеров и устройств, а также некоторые более старые. Посмотрите, какие точно ниже, а также подробную информацию об известных причудах и ошибках.
Содержание
- Содержание
- Поддерживаемые браузеры
- Internet Explorer
- Internet Explorer 10 в Windows Phone 8
- Модальные окна и выпадающие списки на мобильных устройствах
- Увеличение масштаба изображения в браузере
:hover/:focusна мобильном устройстве- Печать
- Android stock браузер
- Валидаторы
Поддерживаемые браузеры
Bootstrap поддерживает последние стабильные версии всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 10-11 / Microsoft Edge.
Альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, напрямую или через API-интерфейс веб-просмотра платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) отображаться и правильно работать в этих браузерах. Более подробная информация о поддержке приведена ниже.
Мобильные устройства
Вообще говоря, Bootstrap поддерживает последние версии всех основных браузеров каждой основной платформы. Обратите внимание, что прокси-браузеры (такие как Opera Mini, Turbo-режим Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Поддерживается | Поддерживается | N/A | Android v5.0+ поддерживается | N/A |
| iOS | Поддерживается | Поддерживается | Поддерживается | N/A | N/A |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Поддерживается |
Настольные браузеры
Точно так же поддерживаются последние версии большинства настольных браузеров.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Поддерживается | Поддерживается | N/A | N/A | Поддерживается | Поддерживается |
| Windows | Поддерживается | Поддерживается | Поддерживается, IE10+ | Поддерживается | Поддерживается | Не поддерживается |
Для Firefox, в дополнение к последнему нормальному стабильному выпуску, мы также поддерживаем последнюю версию Extended Support Release (ESR) Firefox.
Неофициально Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя официально они не поддерживаются.
Список некоторых ошибок браузера, с которыми сталкивается Bootstrap, смотрите в нашей странице ошибок браузера.
Internet Explorer
Поддерживается Internet Explorer 10+; IE9 и down - нет. Имейте в виду, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются в IE10 или требуют свойств с префиксом для полной функциональности. Посетите Can I use… для получения информации о поддержке браузером функций CSS3 и HTML5.
Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия нашего кода, и она по-прежнему поддерживается нашей командой для исправления ошибок и изменения документации. Однако новые функции к ней добавлены не будут.
Internet Explorer 10 в Windows Phone 8
Internet Explorer 10 в Windows Phone версии 8 старше, чем Update 3 (a.k.a. GDR3) не различает device width от viewport width в @-ms-viewport правилах, и, следовательно, неправильно применяет медиа-запросы в CSS Bootstrap. Чтобы решить эту проблему, вам необходимо включить следующий код JavaScript, чтобы обойти ошибку.
// Copyright 2014-2017 The Bootstrap Authors
// Copyright 2014-2017 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}Для получения дополнительных сведений и рекомендаций по использованию прочитайте Windows Phone 8 and Device-Width.
В качестве примера мы приводим это во всей документации и примерах Bootstrap в качестве демонстрации.
Модальные окна и выпадающие списки на мобильных устройствах
Переполнение и прокрутка
Поддержка overflow: hidden; на элементе <body> довольно ограничена в iOS и Android. Когда вы прокручиваете верхнюю или нижнюю часть модального окна в любом из браузеров этих устройств, содержимое <body> начинает прокручиваться. Смотрите ошибку Chrome bug #175502 (исправлена в Chrome v40) и WebKit bug #153852.
Текстовые поля iOS и прокрутка
Начиная с iOS 9.2, в то время как модальное окно открыто, если начальное касание прокрутки находится в пределах текстового <input> или <textarea>, содержимое <body> под модальным окном будет прокручиваться вместо самого модального окна. Смотрите ошибку WebKit bug #153856.
Раскрывающийся список Navbar
Элемент .dropdown-backdrop не используется в iOS в nav из-за сложности z-индексации. Таким образом, чтобы закрыть раскрывающийся список на навигационной панели, вы должны щелкнуть непосредственно элемент раскрывающегося списка (или любой другой элемент, который будет активировать событие click в iOS).
Увеличение масштаба изображения в браузере
Масштабирование страницы неизбежно представляет артефакты рендеринга в некоторых компонентах, как в Bootstrap, так и в остальной части сети. В зависимости от проблемы мы сможем ее устранить (сначала выполните поиск, а затем, если понадобится, откройте проблему). Тем не менее, мы склонны игнорировать их, так как зачастую они не имеют прямого решения, кроме hacky обходных решений.
:hover/:focus на мобильном устройстве
Хотя реальное зависание невозможно на большинстве сенсорных экранов, большинство мобильных браузеров эмулируют поддержку зависания и делают: :hover “sticky”. Другими словами, стили :hover начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажмет на какой-либо другой элемент. На mobile-first сайтах такое поведение обычно нежелательно.
Bootstrap включает обходной путь для этого, хотя по умолчанию он отключен. Установив $enable-hover-media-query to true при компиляции из Sass, Bootstrap будет использовать mq4-hover-shim для отключения :hover стилей в браузерах, которые эмулируют зависание, тем самым препятствуя стилям sticky :hover. Есть некоторые оговорки к этому обходному пути; смотрите документацию.
Печать
Даже в некоторых современных браузерах печать может быть необычной.
С Safari v8.0 использование класса с фиксированной шириной .container может заставить Safari использовать необычно маленький размер шрифта при печати. Смотрите issue #14868 и WebKit bug #138192 для более подробной информации. Одним из возможных способов обхода является следующий CSS:
@media print {
.container {
width: auto;
}
}Android stock браузер
По умолчанию Android 4.1 (и даже некоторые более свежие версии) поставляется приложением Browser в качестве браузера по умолчанию (в отличие от Chrome). К сожалению, приложение Browser содержит множество ошибок и несоответствий с CSS в целом.
Выбор меню
В элементах <select> Android stock браузер не отображает боковые элементы управления, если применяется border-radius и/или border. (Посмотрите this StackOverflow question) Используйте сниппет приведенного ниже кода, чтобы удалить нарушающий CSS и визуализировать <select> как нестилизованный элемент в Android stock браузере. Обнаружение агента пользователя позволяет избежать вмешательства браузеров 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, которые еще не полностью стандартизированы, но они используются исключительно для прогрессивного улучшения.
Эти предупреждения о проверке не имеют значения на практике, так как не hacky часть нашего CSS полностью проверяет правильность и hacky-части не мешают правильному функционированию не hacky, поэтому мы намеренно игнорируем эти особые предупреждения.
В наших документах HTML также есть некоторые незначительные и несущественные предупреждения проверки HTML из-за того, что мы включили временное решение дляa certain Firefox bug.