Браузъри и устройства
Научете за браузърите и устройствата, от модерни до стари, които се поддържат от 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) не се поддържат.
| 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 | Поддържа се | Поддържа се | Поддържа се |
| Windows | Поддържа се | Поддържа се | Поддържа се, IE10+ | Поддържа се | Поддържа се | Не се поддържа |
За Firefox, в допълнение към най-новата нормална стабилна версия, ние също поддържаме най-новата версия на Firefox с разширена поддръжка (ESR) .
Неофициално Bootstrap трябва да изглежда и да се държи достатъчно добре в Chromium и Chrome за Linux, Firefox за Linux и Internet Explorer 9, въпреки че не се поддържат официално.
За списък на някои от грешките в браузъра, с които Bootstrap трябва да се бори, вижте нашата Стена от грешки в браузъра .
Internet Explorer
Поддържа се 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
От iOS 9.2, докато модалът е отворен, ако първоначалното докосване на жест за превъртане е в границите на текстуал <input>или <textarea>, <body>съдържанието под модала ще се превърта вместо самия модал. Вижте грешка #153856 в WebKit .
Падащи менюта на навигационната лента
Елементът .dropdown-backdropне се използва в iOS в навигацията поради сложността на z-индексирането. По този начин, за да затворите падащите менюта в лентите за навигация, трябва директно да щракнете върху падащия елемент (или всеки друг елемент, който ще задейства събитие за щракване в iOS ).
Мащабиране на браузъра
Увеличаването на страницата неизбежно създава артефакти при рендиране в някои компоненти, както в Bootstrap, така и в останалата част от мрежата. В зависимост от проблема, може да успеем да го поправим (първо потърсете и след това отворете проблем, ако е необходимо). Ние обаче сме склонни да ги игнорираме, тъй като те често нямат директно решение, освен хакерски заобиколни решения.
Sticky :hover/ :focusна iOS
Въпреки че :hoverне е възможно на повечето сензорни устройства, iOS емулира това поведение, което води до „лепкави“ стилове на задържане, които продължават след докосване на един елемент. Тези стилове на задържане се премахват само когато потребителите докоснат друг елемент. Това поведение се счита за силно нежелателно и изглежда не е проблем на устройства с Android или Windows.
В нашите v4 алфа и бета издания включихме непълен и коментиран код за включване в подложка за медийни заявки, която би деактивирала стиловете на задържане в браузъри на сензорни устройства, които емулират задържане. Тази работа никога не е била напълно завършена или разрешена, но за да избегнем пълното счупване, ние избрахме да отхвърлим тази подложка и да запазим миксините като преки пътища за псевдо-класовете.
Печат
Дори в някои съвременни браузъри отпечатването може да бъде странно.
От Safari v8.0 използването на класа с фиксирана ширина .containerможе да накара Safari да използва необичайно малък размер на шрифта при печат. Вижте проблем #14868 и грешка #138192 в WebKit за повече подробности. Едно потенциално решение е следният CSS:
@media print {
.container {
width: auto;
}
}
Стандартен браузър за Android
Извън кутията, 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 .