Браузъри и устройства
Научете за браузърите и устройствата, от модерни до стари, които се поддържат от Bootstrap, включително известни странности и грешки за всеки от тях.
Bootstrap поддържа най -новите, стабилни версии на всички основни браузъри и платформи. В Windows поддържаме Internet Explorer 10-11 / Microsoft Edge .
Алтернативни браузъри, които използват най-новата версия на WebKit, Blink или Gecko, независимо дали директно или чрез API за уеб изглед на платформата, не се поддържат изрично. Въпреки това, Bootstrap трябва (в повечето случаи) да се показва и функционира правилно и в тези браузъри. По-конкретна информация за поддръжка е предоставена по-долу.
Можете да намерите нашата поддържана гама от браузъри и техните версии в нашияpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"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) не се поддържат.
| Chrome | Firefox | Safari | Браузър за Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Поддържа се | Поддържа се | N/A | Поддържа се Android v5.0+ | Поддържа се |
| iOS | Поддържа се | Поддържа се | Поддържа се | N/A | Поддържа се |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Поддържа се |
По същия начин се поддържат най-новите версии на повечето настолни браузъри.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Опера | Safari | |
|---|---|---|---|---|---|---|
| Mac | Поддържа се | Поддържа се | N/A | N/A | Поддържа се | Поддържа се |
| Windows | Поддържа се | Поддържа се | Поддържа се, 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;на <body>елемента е доста ограничена в iOS и Android. За тази цел, когато превъртите през горната или долната част на модал в някой от браузърите на тези устройства, <body>съдържанието ще започне да се превърта. Вижте грешка в Chrome #175502 (коригирана в Chrome v40) и грешка в WebKit #153852 .
От iOS 9.2, докато модалът е отворен, ако първоначалното докосване на жест за превъртане е в границите на текстуал <input>или <textarea>, <body>съдържанието под модала ще се превърта вместо самия модал. Вижте грешка #153856 в WebKit .
Елементът .dropdown-backdropне се използва в iOS в навигацията поради сложността на z-индексирането. По този начин, за да затворите падащите менюта в лентите за навигация, трябва директно да щракнете върху падащия елемент (или всеки друг елемент, който ще задейства събитие за щракване в iOS ).
Увеличаването на страницата неизбежно създава артефакти при рендиране в някои компоненти, както в Bootstrap, така и в останалата част от мрежата. В зависимост от проблема, може да успеем да го поправим (първо потърсете и след това отворете проблем, ако е необходимо). Ние обаче сме склонни да ги игнорираме, тъй като те често нямат директно решение, освен хакерски заобиколни решения.
Въпреки че :hoverне е възможно на повечето сензорни устройства, iOS емулира това поведение, което води до „лепкави“ стилове на задържане, които продължават след докосване на един елемент. Тези стилове на задържане се премахват само когато потребителите докоснат друг елемент. Това поведение се счита за силно нежелателно и изглежда не е проблем на устройства с Android или Windows.
В нашите v4 алфа и бета издания включихме непълен и коментиран код за включване в подложка за медийни заявки, която би деактивирала стиловете на задържане в браузъри на сензорни устройства, които емулират задържане. Тази работа никога не е била напълно завършена или разрешена, но за да избегнем пълното счупване, ние избрахме да отхвърлим тази подложка и да запазим миксините като преки пътища за псевдо-класовете.
Дори в някои съвременни браузъри отпечатването може да бъде странно.
От Safari v8.0 използването на класа с фиксирана ширина .containerможе да накара Safari да използва необичайно малък размер на шрифта при печат. Вижте проблем #14868 и грешка #138192 в WebKit за повече подробности. Едно потенциално решение е следният CSS:
@media print {
.container {
width: auto;
}
}Извън кутията, Android 4.1 (и дори някои по-нови версии очевидно) се доставят с приложението Browser като избран уеб браузър по подразбиране (за разлика от Chrome). За съжаление, приложението Browser има много грешки и несъответствия с 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 .