Source

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å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.

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 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

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.

Modaler og dropdowns på mobil

Overløp og rulling

Støtte for overflow: hidden;<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 .

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 .

.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 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;
  }
}

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

<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 .