Nettlesere og enheter
Lær om nettleserne og enhetene, fra moderne til gamle, som støttes av Bootstrap, inkludert kjente quirks og feil for hver.
Bootstrap støtter de nyeste, stabile utgivelsene av alle større nettlesere og plattformer. På Windows støtter vi Internet Explorer 10-11 / Microsoft Edge .
Alternative nettlesere som bruker den nyeste versjonen av WebKit, Blink eller Gecko, enten direkte eller via plattformens webvisnings-API, støttes ikke eksplisitt. Imidlertid bør Bootstrap (i de fleste tilfeller) vises og fungere korrekt i disse nettleserne også. Mer spesifikk støtteinformasjon er gitt nedenfor.
Du kan finne vårt støttede utvalg av nettlesere og deres versjoner i vårpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Vi bruker Autoprefixer for å håndtere tiltenkt nettleserstøtte via CSS-prefikser, som bruker Browserslist til å administrere disse nettleserversjonene. Se dokumentasjonen deres for hvordan du integrerer disse verktøyene i prosjektene dine.
Generelt sett støtter Bootstrap de nyeste versjonene av hver store plattforms standard nettlesere. Merk at proxy-nettlesere (som Opera Mini, Opera Mobiles Turbo-modus, UC Browser Mini, Amazon Silk) ikke støttes.
| Chrome | Firefox | Safari | Android-nettleser og WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Støttes | Støttes | N/A | Android v5.0+ støttes | Støttes |
| iOS | Støttes | Støttes | Støttes | N/A | Støttes |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Støttes |
På samme måte støttes de nyeste versjonene av de fleste stasjonære nettlesere.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Støttes | Støttes | N/A | N/A | Støttes | Støttes |
| Windows | Støttes | Støttes | Støttes, IE10+ | Støttes | Støttes | Ikke støttet |
For Firefox, i tillegg til den siste normale stabile utgivelsen, støtter vi også den nyeste versjonen av Firefox (Extended Support Release) (ESR) .
Uoffisielt burde Bootstrap se ut og oppføre seg godt nok i Chromium og Chrome for Linux, Firefox for Linux og Internet Explorer 9, selv om de ikke er offisielt støttet.
For en liste over noen av nettleserfeilene som Bootstrap må kjempe med, se vår vegg med nettleserfeil .
Internet Explorer 10+ støttes; IE9 og nedover er det ikke. Vær oppmerksom på at enkelte CSS3-egenskaper og HTML5-elementer ikke støttes fullt ut i IE10, eller krever prefiksegenskaper for full funksjonalitet. Besøk Kan jeg bruke... for detaljer om nettleserstøtte for CSS3- og HTML5-funksjoner.
Hvis du trenger IE8-9-støtte, bruk Bootstrap 3. Det er den mest stabile versjonen av koden vår og støttes fortsatt av teamet vårt for kritiske feilrettinger og dokumentasjonsendringer. Imidlertid vil ingen nye funksjoner bli lagt til den.
Støtte for overflow: hidden;på <body>elementet er ganske begrenset i iOS og Android. For det formål, når du ruller forbi toppen eller bunnen av en modal i en av disse enhetenes nettlesere, vil <body>innholdet begynne å rulle. Se Chrome-feil #175502 (rettet i Chrome v40) og WebKit-feil #153852 .
Fra og med iOS 9.2, mens en modal er åpen, hvis den første berøringen av en rullebevegelse er innenfor grensen til en tekst <input>eller en <textarea>, vil <body>innholdet under modalen bli rullet i stedet for selve modalen. Se WebKit-feil #153856 .
.dropdown-backdropElementet brukes ikke på iOS i nav på grunn av kompleksiteten til z-indeksering . Derfor, for å lukke rullegardinmenyene i navbarer, må du klikke direkte på rullegardinelementet (eller et hvilket som helst annet element som vil utløse en klikkhendelse i iOS ).
Sidezooming presenterer uunngåelig gjengivelsesartefakter i enkelte komponenter, både i Bootstrap og resten av nettet. Avhengig av problemet kan vi kanskje fikse det (søk først og åpne et problem om nødvendig). Imidlertid har vi en tendens til å ignorere disse siden de ofte ikke har noen direkte løsning annet enn hacky løsninger.
Selv om :hoverdet ikke er mulig på de fleste berøringsenheter, emulerer iOS denne oppførselen, noe som resulterer i "klistre" svevestiler som vedvarer etter å ha trykket på ett element. Disse svevestilene fjernes bare når brukere trykker på et annet element. Denne oppførselen anses stort sett som uønsket og ser ikke ut til å være et problem på Android- eller Windows-enheter.
Gjennom våre v4 alfa- og beta-utgivelser inkluderte vi ufullstendig og kommentert kode for å velge et mediesøk-shim som ville deaktivere svevestiler i nettlesere for berøringsenheter som emulerer sveving. Dette arbeidet ble aldri fullstendig fullført eller aktivert, men for å unngå fullstendig brudd, har vi valgt å avskrive denne shim og beholde mixinene som snarveier for pseudoklassene.
Selv i noen moderne nettlesere kan utskrift være sære.
Fra og med Safari v8.0 kan bruk av fastbreddeklassen .containerføre til at Safari bruker en uvanlig liten skriftstørrelse ved utskrift. Se utgave #14868 og WebKit-feil #138192 for flere detaljer. En mulig løsning er følgende CSS:
@media print {
.container {
width: auto;
}
}Ut av esken leveres Android 4.1 (og til og med noen nyere utgivelser tilsynelatende) med nettleserappen som standard nettleser (i motsetning til Chrome). Dessverre har nettleserappen mange feil og inkonsekvenser med CSS generelt.
På <select>elementer vil ikke Android-aksjenettleseren vise sidekontrollene hvis det er en border-radiusog/eller borderbrukt. (Se dette StackOverflow-spørsmålet for detaljer.) Bruk kodebiten nedenfor for å fjerne den fornærmende CSS-en og gjengi den <select>som et ustilt element i Android-aksjenettleseren. Brukeragenten som snuser unngår forstyrrelser med Chrome-, Safari- og Mozilla-nettlesere.
<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>Vil du se et eksempel? Sjekk ut denne JS Bin-demoen.
For å gi den best mulige opplevelsen til gamle og buggy nettlesere, bruker Bootstrap CSS-nettleserhack flere steder for å målrette spesiell CSS til visse nettleserversjoner for å omgå feil i nettleserne selv. Disse hackene får forståelig nok CSS-validatorer til å klage over at de er ugyldige. Et par steder bruker vi også avanserte CSS-funksjoner som ennå ikke er fullstendig standardiserte, men disse brukes utelukkende for progressiv forbedring.
Disse valideringsadvarslene spiller ingen rolle i praksis siden den ikke-hacky-delen av CSS-en vår validerer fullt ut og de hacky-delene ikke forstyrrer den riktige funksjonen til den ikke-hacky-delen, og derfor ignorerer vi disse advarslene bevisst.
HTML-dokumentene våre har også noen trivielle og ubetydelige HTML-valideringsadvarsler på grunn av vår inkludering av en løsning for en viss Firefox-feil .