Browsere og enheder
Lær om de browsere og enheder, fra moderne til gamle, der understøttes af Bootstrap, inklusive kendte særheder og fejl for hver.
Understøttede browsere
Bootstrap understøtter de seneste, stabile udgivelser af alle større browsere og platforme. På Windows understøtter vi Internet Explorer 10-11 / Microsoft Edge .
Alternative browsere, der bruger den seneste version af WebKit, Blink eller Gecko, uanset om de er direkte eller via platformens webvisnings-API, understøttes ikke eksplicit. Bootstrap bør dog (i de fleste tilfælde) også vise og fungere korrekt i disse browsere. Mere specifikke supportoplysninger findes nedenfor.
Du kan finde vores understøttede udvalg af browsere og deres versioner i vores.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 bruger Autoprefixer til at håndtere tilsigtet browsersupport via CSS-præfikser, som bruger Browserslist til at administrere disse browserversioner. Se deres dokumentation for, hvordan du integrerer disse værktøjer i dine projekter.
Mobile enheder
Generelt set understøtter Bootstrap de nyeste versioner af hver større platforms standardbrowsere. Bemærk, at proxy-browsere (såsom Opera Mini, Opera Mobiles Turbo-tilstand, UC Browser Mini, Amazon Silk) ikke understøttes.
| Chrome | Firefox | Safari | Android-browser og WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Understøttet | Understøttet | N/A | Android v5.0+ understøttet | Understøttet |
| iOS | Understøttet | Understøttet | Understøttet | N/A | Understøttet |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Understøttet |
Desktop browsere
På samme måde understøttes de nyeste versioner af de fleste desktopbrowsere.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Understøttet | Understøttet | N/A | Understøttet | Understøttet | Understøttet |
| Windows | Understøttet | Understøttet | Understøttet, IE10+ | Understøttet | Understøttet | Ikke understøttet |
For Firefox understøtter vi udover den seneste normale stabile udgivelse også den seneste Extended Support Release (ESR) version af Firefox.
Uofficielt burde Bootstrap se ud og opføre sig godt nok i Chromium og Chrome til Linux, Firefox til Linux og Internet Explorer 9, selvom de ikke er officielt understøttet.
For en liste over nogle af de browserfejl, som Bootstrap skal kæmpe med, se vores Wall of browser-fejl .
Internet Explorer
Internet Explorer 10+ er understøttet; IE9 og ned er det ikke. Vær opmærksom på, at nogle CSS3-egenskaber og HTML5-elementer ikke er fuldt understøttet i IE10 eller kræver præfiksegenskaber for fuld funktionalitet. Besøg Kan jeg bruge... for detaljer om browserunderstøttelse af CSS3- og HTML5-funktioner. Hvis du har brug for IE8-9-understøttelse, skal du bruge Bootstrap 3.
Modaler og dropdowns på mobil
Overløb og rulning
Support til overflow: hidden;på <body>elementet er ret begrænset i iOS og Android. Til det formål, når du ruller forbi toppen eller bunden af en modal i en af disse enheders browsere, <body>begynder indholdet at rulle. Se Chrome-fejl #175502 (rettet i Chrome v40) og WebKit-fejl #153852 .
iOS-tekstfelter og rulning
Fra og med iOS 9.2, mens en modal er åben, hvis den første berøring af en rullebevægelse er inden for grænsen af en tekst <input>eller en <textarea>, vil <body>indholdet under modalen blive rullet i stedet for selve modalen. Se WebKit-fejl #153856 .
Navbar dropdowns
Elementet .dropdown-backdropbruges ikke på iOS i nav på grund af kompleksiteten af z-indeksering. For at lukke dropdowns i navbars skal du således klikke direkte på dropdown-elementet (eller et hvilket som helst andet element, der udløser en klikhændelse i iOS ).
Browser-zoomning
Sidezoomning præsenterer uundgåeligt gengivelsesartefakter i nogle komponenter, både i Bootstrap og resten af nettet. Afhængigt af problemet kan vi muligvis løse det (søg først, og åbn derefter et problem, hvis det er nødvendigt). Vi har dog en tendens til at ignorere disse, da de ofte ikke har nogen direkte løsning udover hacky løsninger.
Sticky :hover/ :focuspå iOS
Selvom :hoverdet ikke er muligt på de fleste berøringsenheder, emulerer iOS denne adfærd, hvilket resulterer i "klæbende" svævestile, der fortsætter efter at have trykket på et element. Disse svævestile fjernes kun, når brugere trykker på et andet element. Denne adfærd anses for stort set uønsket og ser ikke ud til at være et problem på Android- eller Windows-enheder.
I hele vores v4 alfa- og beta-udgivelser inkluderede vi ufuldstændig og kommenteret kode for at tilvælge et medieforespørgsels-shim, der ville deaktivere svævestile i berøringsenhedsbrowsere, der emulerer svævning. Dette arbejde blev aldrig fuldstændigt afsluttet eller aktiveret, men for at undgå fuldstændig brud har vi valgt at forælde dette shim og beholde mixins som genveje til pseudo-klasserne.
Trykning
Selv i nogle moderne browsere kan udskrivning være skæv.
Fra Safari v8.0 kan brug af klassen med fast bredde .containerfå Safari til at bruge en usædvanlig lille skriftstørrelse ved udskrivning. Se udgave #14868 og WebKit-fejl #138192 for flere detaljer. En potentiel løsning er følgende CSS:
@media print {
.container {
width: auto;
}
}
Android aktiebrowser
Ud af kassen leveres Android 4.1 (og endda nogle nyere udgivelser tilsyneladende) med Browser-appen som den foretrukne webbrowser (i modsætning til Chrome). Desværre har Browser-appen masser af fejl og uoverensstemmelser med CSS generelt.
Vælg menu
På <select>elementer vil Android aktiebrowseren ikke vise sidekontrollerne, hvis der er en border-radiusog/eller borderanvendt. (Se dette StackOverflow-spørgsmål for detaljer.) Brug kodestykket nedenfor til at fjerne den stødende CSS og gengive det <select>som et ustilet element i Android-aktiebrowseren. Brugeragentens sniffning undgår interferens med Chrome-, Safari- og Mozilla-browsere.
<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? Tjek denne JS Bin-demo .
Validatorer
For at give den bedst mulige oplevelse til gamle og buggy browsere, bruger Bootstrap CSS browser hacks flere steder til at målrette speciel CSS til bestemte browserversioner for at omgå fejl i selve browserne. Disse hacks får forståeligt nok CSS-validatorer til at klage over, at de er ugyldige. Et par steder bruger vi også avancerede CSS-funktioner, der endnu ikke er fuldt standardiserede, men disse bruges udelukkende til progressiv forbedring.
Disse valideringsadvarsler betyder ikke noget i praksis, da den ikke-hacky del af vores CSS validerer fuldt ud, og de hacky dele ikke forstyrrer den korrekte funktion af den ikke-hacky del, og derfor ignorerer vi bevidst disse særlige advarsler.
Vores HTML-dokumenter har ligeledes nogle trivielle og uvæsentlige HTML-valideringsadvarsler på grund af vores medtagelse af en løsning til en bestemt Firefox-fejl .