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

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 .

.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

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

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 .