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.
Støttede nettlesere
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år.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
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.
Mobile enheter
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 |
Desktop-nettlesere
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 | Støttes | 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
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.
Modaler og dropdowns på mobil
Overløp og rulling
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 enhetenes nettlesere, vil <body>innholdet begynne å rulle. Se Chrome-feil #175502 (fikset i Chrome v40) og WebKit-feil #153852 .
iOS-tekstfelt og rulling
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 .
Navbar rullegardinmenyene
.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 ).
Nettleserzooming
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.
Sticky :hover/ :focuspå iOS
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.
Printing
Selv i noen moderne nettlesere kan utskrift være rart.
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;
}
}
Android lager nettleser
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.
Velg meny
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 .
Validatorer
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 .