Browsere și dispozitive
Aflați despre browserele și dispozitivele, de la moderne la cele vechi, care sunt acceptate de Bootstrap, inclusiv ciudateniile și erorile cunoscute pentru fiecare.
Browsere acceptate
Bootstrap acceptă cele mai recente versiuni stabile ale tuturor browserelor și platformelor majore. Pe Windows, acceptăm Internet Explorer 10-11 / Microsoft Edge .
Browserele alternative care utilizează cea mai recentă versiune de WebKit, Blink sau Gecko, fie direct, fie prin intermediul API-ului de vizualizare web a platformei, nu sunt acceptate în mod explicit. Totuși, Bootstrap ar trebui (în majoritatea cazurilor) să se afișeze și să funcționeze corect și în aceste browsere. Informații de asistență mai specifice sunt furnizate mai jos.
Puteți găsi gama noastră acceptată de browsere și versiunile acestora în.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
Folosim Autoprefixer pentru a gestiona suportul dorit de browser prin prefixe CSS, care utilizează Browserslist pentru a gestiona aceste versiuni de browser. Consultați documentația acestora pentru a afla cum să integrați aceste instrumente în proiectele dvs.
Dispozitive mobile
În general, Bootstrap acceptă cele mai recente versiuni ale browserelor implicite ale fiecărei platforme majore. Rețineți că browserele proxy (cum ar fi Opera Mini, modul Turbo al Opera Mobile, UC Browser Mini, Amazon Silk) nu sunt acceptate.
| Crom | Firefox | Safari | Browser Android și WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Sprijinit | Sprijinit | N / A | Android v5.0+ acceptat | Sprijinit |
| iOS | Sprijinit | Sprijinit | Sprijinit | N / A | Sprijinit |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Sprijinit |
Browsere desktop
În mod similar, sunt acceptate cele mai recente versiuni ale majorității browserelor desktop.
| Crom | Firefox | Internet Explorer | Microsoft Edge | Operă | Safari | |
|---|---|---|---|---|---|---|
| Mac | Sprijinit | Sprijinit | N / A | N / A | Sprijinit | Sprijinit |
| Windows | Sprijinit | Sprijinit | Suportat, IE10+ | Sprijinit | Sprijinit | Nu sunt acceptate |
Pentru Firefox, pe lângă cea mai recentă versiune stabilă normală, acceptăm și cea mai recentă versiune Extended Support Release (ESR) a Firefox.
Neoficial, Bootstrap ar trebui să arate și să se comporte suficient de bine în Chromium și Chrome pentru Linux, Firefox pentru Linux și Internet Explorer 9, deși nu sunt acceptate oficial.
Pentru o listă cu unele dintre erorile de browser cu care trebuie să se confrunte Bootstrap, consultați Wall of browser bugs .
Internet Explorer
Internet Explorer 10+ este acceptat; IE9 și în jos nu este. Rețineți că unele proprietăți CSS3 și elemente HTML5 nu sunt pe deplin acceptate în IE10 sau necesită proprietăți prefixate pentru funcționalitatea completă. Vizitați Pot folosi... pentru detalii despre compatibilitatea browserului cu funcțiile CSS3 și HTML5. Dacă aveți nevoie de suport IE8-9, utilizați Bootstrap 3.
Modalități și meniuri derulante pe mobil
Debordare și defilare
Suportul pentru overflow: hidden;element <body>este destul de limitat în iOS și Android. În acest scop, atunci când derulați dincolo de partea de sus sau de jos a unui mod în oricare dintre browserele respectivelor dispozitive, <body>conținutul va începe să defileze. Consultați eroarea Chrome #175502 (remediată în Chrome v40) și eroarea WebKit #153852 .
Câmpuri de text iOS și derulare
Începând cu iOS 9.2, în timp ce un modal este deschis, dacă atingerea inițială a unui gest de defilare se află în limita unui text <input>sau a unui <textarea>, <body>conținutul de sub modal va fi derulat în loc de modal în sine. Vezi eroarea WebKit #153856 .
Mențiuni derulante din bara de navigare
Elementul .dropdown-backdropnu este utilizat pe iOS în navigare din cauza complexității indexării z. Astfel, pentru a închide meniurile derulante din barele de navigare, trebuie să faceți clic direct pe elementul drop-down (sau orice alt element care va declanșa un eveniment de clic în iOS ).
Mărirea browserului
Mărirea paginii prezintă inevitabil artefacte de randare în unele componente, atât în Bootstrap, cât și în restul web. În funcție de problemă, este posibil să o putem remedia (căutați mai întâi și apoi deschideți o problemă dacă este necesar). Cu toate acestea, avem tendința de a le ignora, deoarece adesea nu au nicio soluție directă, în afară de soluții hacky.
Sticky :hover/ :focuspe iOS
Deși :hovernu este posibil pe majoritatea dispozitivelor tactile, iOS emulează acest comportament, rezultând stiluri de trecere cu mouse-ul „lipicioase” care persistă după ce atingeți un element. Aceste stiluri de trecere cu mouse-ul sunt eliminate numai atunci când utilizatorii ating un alt element. Acest comportament este considerat în mare parte nedorit și pare să nu fie o problemă pe dispozitivele Android sau Windows.
De-a lungul versiunilor noastre alfa și beta v4, am inclus cod incomplet și comentat pentru a opta pentru o interogare de interogare media care ar dezactiva stilurile de hover în browserele dispozitivelor tactile care emulează hovering. Această lucrare nu a fost niciodată complet finalizată sau activată, dar pentru a evita ruperea completă, am optat să renunțăm la acest shim și să păstrăm mixin-urile ca scurtături pentru pseudo-clase.
Imprimare
Chiar și în unele browsere moderne, imprimarea poate fi ciudată.
Începând cu Safari v8.0, utilizarea clasei cu lățime fixă .containerpoate determina Safari să folosească o dimensiune neobișnuit de mică a fontului la imprimare. Consultați problema #14868 și eroarea WebKit #138192 pentru mai multe detalii. O posibilă soluție este următorul CSS:
@media print {
.container {
width: auto;
}
}Browser stoc Android
Ieșit din cutie, Android 4.1 (și chiar și unele versiuni mai noi aparent) sunt livrate cu aplicația Browser ca browser web implicit ales (spre deosebire de Chrome). Din păcate, aplicația Browser are o mulțime de erori și inconsecvențe cu CSS în general.
Selectați meniul
Pe <select>elemente, browserul stoc Android nu va afișa controalele laterale dacă există border-radiusși/sau borderaplicat. (Consultați această întrebare StackOverflow pentru detalii.) Folosiți fragmentul de cod de mai jos pentru a elimina CSS-ul ofensator și a reda <select>ca element fără stil în browserul de stoc Android. Agentul de utilizator sniffing evită interferența cu browserele 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>Vrei să vezi un exemplu? Consultați această demonstrație JS Bin .
Validatori
Pentru a oferi cea mai bună experiență posibilă browserelor vechi și cu erori, Bootstrap folosește hack-uri de browser CSS în mai multe locuri pentru a viza CSS special către anumite versiuni de browser, pentru a rezolva erorile din browserele în sine. Aceste hack-uri determină, în mod înțeles, validatorii CSS să se plângă că nu sunt validi. În câteva locuri, folosim și funcții CSS de ultimă oră, care nu sunt încă complet standardizate, dar acestea sunt folosite exclusiv pentru îmbunătățirea progresivă.
Aceste avertismente de validare nu contează în practică, deoarece porțiunea non-hacky a CSS-ului nostru se validează pe deplin, iar porțiunile hacky nu interferează cu funcționarea corectă a porțiunii non-hacky, de aceea ignorăm în mod deliberat aceste avertismente particulare.
Documentele noastre HTML au, de asemenea, niște avertismente de validare HTML banale și fără consecințe, datorită includerii noastre a unei soluții pentru o anumită eroare a Firefox .