Браузери та пристрої
Дізнайтеся про браузери та пристрої, від сучасних до старих, які підтримуються 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 | Сафарі | Браузер 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 | Опера | Сафарі | |
|---|---|---|---|---|---|---|
| Мак | Підтримується | Підтримується | N/A | N/A | Підтримується | Підтримується |
| вікна | Підтримується | Підтримується | Підтримується, 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>вміст під модалом прокручуватиметься замість самого модалу. Перегляньте помилку WebKit №153856 .
Панель навігації, що випадає
Елемент .dropdown-backdropне використовується в iOS у навігації через складність z-індексування. Таким чином, щоб закрити розкривні списки на навігаційних панелях, ви повинні безпосередньо клацнути спадний елемент (або будь-який інший елемент, який ініціює подію клацання в iOS ).
Масштабування браузера
Масштабування сторінки неминуче створює артефакти візуалізації в деяких компонентах, як у Bootstrap, так і в решті Інтернету. Залежно від проблеми ми можемо її вирішити (спочатку здійсніть пошук, а потім за потреби відкрийте проблему). Однак ми схильні ігнорувати їх, оскільки вони часто не мають прямого рішення, окрім хакерських обхідних шляхів.
Sticky :hover/ :focusна iOS
Хоча :hoverце неможливо на більшості сенсорних пристроїв, iOS емулює таку поведінку, що призводить до «липких» стилів наведення, які зберігаються після торкання одного елемента. Ці стилі наведення миші видаляються, лише коли користувачі торкаються іншого елемента. Така поведінка вважається дуже небажаною та, здається, не є проблемою на пристроях Android або Windows.
У наших альфа- та бета-версіях версії 4 ми додавали неповний і закоментований код для ввімкнення прокладки медіа-запитів, яка вимикає стилі наведення в браузерах сенсорних пристроїв, які емулюють наведення. Ця робота ніколи не була повністю завершена або включена, але, щоб уникнути повного збою, ми вирішили відмовитися від цієї прокладки та залишити міксини як ярлики для псевдокласів.
Друк
Навіть у деяких сучасних браузерах друк може бути дивним.
Починаючи з версії 8.0 Safari, використання класу фіксованої ширини .containerможе спричинити використання Safari надзвичайно малого розміру шрифту під час друку. Додаткову інформацію див . у проблемі №14868 і помилці WebKit №138192 . Одним із потенційних обхідних шляхів є наступний CSS:
@media print {
.container {
width: auto;
}
}Стандартний браузер Android
З коробки Android 4.1 (і навіть деякі новіші випуски, мабуть) постачаються з програмою Браузер як веб-браузером за замовчуванням (на відміну від 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 .