Przeglądarki i urządzenia
Dowiedz się o przeglądarkach i urządzeniach, od nowoczesnych po stare, które są obsługiwane przez Bootstrap, w tym o znanych dziwactwach i błędach dla każdego z nich.
Obsługiwane przeglądarki
Bootstrap obsługuje najnowsze, stabilne wydania wszystkich głównych przeglądarek i platform. W systemie Windows obsługujemy Internet Explorer 10-11 / Microsoft Edge .
Alternatywne przeglądarki, które korzystają z najnowszej wersji WebKit, Blink lub Gecko, bezpośrednio lub za pośrednictwem interfejsu API widoku internetowego platformy, nie są wyraźnie obsługiwane. Jednak Bootstrap powinien (w większości przypadków) wyświetlać się i działać poprawnie również w tych przeglądarkach. Bardziej szczegółowe informacje dotyczące pomocy znajdują się poniżej.
Możesz znaleźć naszą obsługiwaną gamę przeglądarek i ich wersje w naszym.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
Używamy Autoprefixera do obsługi zamierzonej obsługi przeglądarek za pomocą prefiksów CSS, który wykorzystuje Browserslist do zarządzania tymi wersjami przeglądarek. Zapoznaj się z ich dokumentacją, aby dowiedzieć się, jak zintegrować te narzędzia ze swoimi projektami.
Urządzenia mobilne
Ogólnie rzecz biorąc, Bootstrap obsługuje najnowsze wersje domyślnych przeglądarek każdej z głównych platform. Pamiętaj, że przeglądarki proxy (takie jak Opera Mini, tryb Turbo Opera Mobile, UC Browser Mini, Amazon Silk) nie są obsługiwane.
| Chrom | Firefox | Safari | Przeglądarka Android i WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Utrzymany | Utrzymany | Nie dotyczy | Obsługiwany Android v5.0+ | Utrzymany |
| iOS | Utrzymany | Utrzymany | Utrzymany | Nie dotyczy | Utrzymany |
| Windows 10 Mobile | Nie dotyczy | Nie dotyczy | Nie dotyczy | Nie dotyczy | Utrzymany |
Przeglądarki komputerowe
Podobnie obsługiwane są najnowsze wersje większości przeglądarek komputerowych.
| Chrom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Prochowiec | Utrzymany | Utrzymany | Nie dotyczy | Utrzymany | Utrzymany | Utrzymany |
| Okna | Utrzymany | Utrzymany | Obsługiwane, IE10+ | Utrzymany | Utrzymany | Nieobsługiwany |
W przypadku przeglądarki Firefox, poza najnowszą normalną stabilną wersją, obsługujemy również najnowszą wersję programu Firefox Extended Support Release (ESR) .
Nieoficjalnie Bootstrap powinien wyglądać i zachowywać się wystarczająco dobrze w Chromium i Chrome dla Linuksa, Firefoksie dla Linuksa i Internet Explorerze 9, chociaż nie są oficjalnie obsługiwane.
Aby zapoznać się z listą niektórych błędów przeglądarki, z którymi musi się zmagać Bootstrap, zapoznaj się z naszą ścianą błędów przeglądarki .
Internet Explorer
obsługiwany jest Internet Explorer 10+; IE9 i dół nie jest. Należy pamiętać, że niektóre właściwości CSS3 i elementy HTML5 nie są w pełni obsługiwane w IE10 lub wymagają właściwości z przedrostkiem dla pełnej funkcjonalności. Odwiedź stronę Czy mogę użyć…, aby uzyskać szczegółowe informacje na temat obsługi przez przeglądarkę funkcji CSS3 i HTML5. Jeśli potrzebujesz obsługi IE8-9, użyj Bootstrap 3.
Modals i listy rozwijane na urządzeniach mobilnych
Przepełnienie i przewijanie
Wsparcie dla overflow: hidden;elementu <body>jest dość ograniczone w iOS i Androidzie. W tym celu, gdy przewiniesz górną lub dolną część modalności w jednej z przeglądarek tych urządzeń, <body>zawartość zacznie się przewijać. Zobacz błąd Chrome #175502 (naprawiony w Chrome v40) i błąd WebKit #153852 .
Pola tekstowe i przewijanie iOS
Od iOS 9.2, gdy mod jest otwarty, jeśli pierwsze dotknięcie gestu przewijania znajduje się w granicach tekstu <input>lub <textarea>, <body>zawartość pod modą zostanie przewinięta zamiast samego modalu. Zobacz błąd nr 153856 dotyczący WebKit .
Menu rozwijane paska nawigacyjnego
Element .dropdown-backdropnie jest używany w systemie iOS w nawigacji ze względu na złożoność indeksowania Z. Tak więc, aby zamknąć listy rozwijane w paskach nawigacyjnych, musisz bezpośrednio kliknąć element listy rozwijanej (lub dowolny inny element, który wywoła zdarzenie kliknięcia w systemie iOS ).
Powiększanie przeglądarki
Powiększanie strony nieuchronnie przedstawia artefakty renderowania w niektórych komponentach, zarówno w Bootstrap, jak iw pozostałej części sieci. W zależności od problemu możemy go naprawić (najpierw wyszukaj, a następnie otwórz problem, jeśli zajdzie taka potrzeba). Jednak zwykle je ignorujemy, ponieważ często nie mają one bezpośredniego rozwiązania poza hakerskimi obejściami.
Przyklejony :hover/ :focusna iOS
Chociaż :hovernie jest to możliwe na większości urządzeń dotykowych, iOS emuluje to zachowanie, powodując „lepkie” style najechania, które utrzymują się po dotknięciu jednego elementu. Te style najechania są usuwane tylko wtedy, gdy użytkownicy dotkną innego elementu. To zachowanie jest uważane za w dużej mierze niepożądane i wydaje się, że nie stanowi problemu na urządzeniach z systemem Android lub Windows.
W naszych wersjach alfa i beta v4 dołączaliśmy niekompletny i skomentowany kod umożliwiający włączenie podkładki zapytania o media, która wyłączałaby style najeżdżania w przeglądarkach urządzeń dotykowych, które emulują najeżdżanie. Ta praca nigdy nie została w pełni ukończona ani włączona, ale aby uniknąć całkowitego zepsucia, zdecydowaliśmy się odrzucić tę podkładkę i zachować domieszki jako skróty dla pseudo-klas.
Druk
Nawet w niektórych nowoczesnych przeglądarkach drukowanie może być dziwaczne.
Od wersji Safari 8.0 użycie klasy o stałej szerokości .containermoże spowodować, że Safari podczas drukowania użyje niezwykle małego rozmiaru czcionki. Zobacz problem #14868 i błąd WebKit #138192 , aby uzyskać więcej informacji. Jednym z potencjalnych obejść jest następujący kod CSS:
@media print {
.container {
width: auto;
}
}
Przeglądarka giełdowa na Androida
Po wyjęciu z pudełka system Android 4.1 (a nawet niektóre nowsze wersje) jest dostarczany z aplikacją Browser jako domyślną wybraną przeglądarką internetową (w przeciwieństwie do Chrome). Niestety, aplikacja Przeglądarka ma wiele błędów i niespójności z CSS w ogóle.
Wybierz menu
W <select>elementach przeglądarka giełdowa systemu Android nie wyświetli bocznych elementów sterujących, jeśli istnieje border-radiusi/lub borderzastosowano. (Zobacz to pytanie StackOverflow, aby uzyskać szczegółowe informacje). Użyj poniższego fragmentu kodu, aby usunąć naruszający kod CSS i wyrenderować go <select>jako element bez stylu w przeglądarce giełdowej systemu Android. Sniffing agenta użytkownika pozwala uniknąć zakłóceń w przeglądarkach Chrome, Safari i 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>
Chcesz zobaczyć przykład? Sprawdź to demo JS Bin .
Walidatory
Aby zapewnić najlepszą możliwą obsługę starym i błędnym przeglądarkom, Bootstrap wykorzystuje w kilku miejscach hacki CSS przeglądarki , aby kierować specjalny CSS do niektórych wersji przeglądarek w celu obejścia błędów w samych przeglądarkach. Te hacki, co zrozumiałe, powodują, że walidatory CSS narzekają, że są nieprawidłowe. W kilku miejscach używamy również najnowocześniejszych funkcji CSS, które nie są jeszcze w pełni ustandaryzowane, ale służą wyłącznie do progresywnego ulepszania.
Te ostrzeżenia walidacyjne nie mają znaczenia w praktyce, ponieważ niehackowa część naszego CSS w pełni się sprawdza, a zhakowane części nie zakłócają prawidłowego funkcjonowania niehackowanej części, dlatego celowo ignorujemy te konkretne ostrzeżenia.
Nasza dokumentacja HTML również zawiera kilka trywialnych i nieistotnych ostrzeżeń dotyczących sprawdzania poprawności HTML z powodu włączenia obejścia pewnego błędu w Firefoksie .