Webbläsare och enheter
Lär dig mer om webbläsarna och enheterna, från moderna till gamla, som stöds av Bootstrap, inklusive kända egenheter och buggar för var och en.
Webbläsare som stöds
Bootstrap stöder de senaste, stabila utgåvorna av alla större webbläsare och plattformar. På Windows stöder vi Internet Explorer 10-11 / Microsoft Edge .
Alternativa webbläsare som använder den senaste versionen av WebKit, Blink eller Gecko, antingen direkt eller via plattformens webbvy-API, stöds inte uttryckligen. Bootstrap bör dock (i de flesta fall) visa och fungera korrekt även i dessa webbläsare. Mer specifik supportinformation finns nedan.
Du kan hitta vårt utbud av webbläsare som stöds och deras versioner 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 använder Autoprefixer för att hantera avsett webbläsarstöd via CSS-prefix, som använder Browserslist för att hantera dessa webbläsarversioner. Se deras dokumentation för hur du integrerar dessa verktyg i dina projekt.
Mobil enheter
Generellt sett stöder Bootstrap de senaste versionerna av varje större plattforms standardwebbläsare. Observera att proxywebbläsare (som Opera Mini, Opera Mobiles Turbo-läge, UC Browser Mini, Amazon Silk) inte stöds.
| Krom | Firefox | Safari | Android webbläsare & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Stöds | Stöds | N/A | Android v5.0+ stöds | Stöds |
| iOS | Stöds | Stöds | Stöds | N/A | Stöds |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Stöds |
Desktop webbläsare
På samma sätt stöds de senaste versionerna av de flesta stationära webbläsare.
| Krom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Stöds | Stöds | N/A | Stöds | Stöds | Stöds |
| Windows | Stöds | Stöds | Stöds, IE10+ | Stöds | Stöds | Stöds inte |
För Firefox stöder vi, förutom den senaste normala stabila versionen, även den senaste versionen av Firefox (Extended Support Release) (ESR) .
Inofficiellt borde Bootstrap se ut och bete sig tillräckligt bra i Chromium och Chrome för Linux, Firefox för Linux och Internet Explorer 9, även om de inte stöds officiellt.
För en lista över några av webbläsarbuggarna som Bootstrap måste brottas med, se vår Wall of browser bugs .
Internet Explorer
Internet Explorer 10+ stöds; IE9 och nedåt är det inte. Tänk på att vissa CSS3-egenskaper och HTML5-element inte stöds fullt ut i IE10, eller kräver prefixegenskaper för full funktionalitet. Besök Kan jag använda... för information om webbläsarstöd för CSS3- och HTML5-funktioner. Om du behöver stöd för IE8-9, använd Bootstrap 3.
Modals och dropdowns på mobilen
Översvämning och rullning
Stödet för overflow: hidden;elementet <body>är ganska begränsat i iOS och Android. För detta ändamål, när du rullar förbi toppen eller botten av en modal i någon av dessa enheters webbläsare, <body>kommer innehållet att börja rulla. Se Chrome bugg #175502 (fixad i Chrome v40) och WebKit bugg #153852 .
iOS-textfält och rullning
Från och med iOS 9.2, medan en modal är öppen, om den första beröringen av en rullningsgest är inom gränsen för en text <input>eller en <textarea>, kommer <body>innehållet under modalen att rullas istället för själva modalen. Se WebKit-fel #153856 .
Navbar rullgardinsmeny
Elementet .dropdown-backdropanvänds inte på iOS i nav på grund av komplexiteten i z-indexering. För att stänga rullgardinsmenyn i navigeringsfält måste du alltså direkt klicka på rullgardinselementet (eller något annat element som kommer att utlösa en klickhändelse i iOS ).
Webbläsarzoomning
Sidzoomning presenterar oundvikligen renderingsartefakter i vissa komponenter, både i Bootstrap och resten av webben. Beroende på problemet kan vi kanske åtgärda det (sök först och öppna sedan ett problem om det behövs). Vi tenderar dock att ignorera dessa eftersom de ofta inte har någon direkt lösning förutom hackiga lösningar.
Sticky :hover/ :focuspå iOS
Även :hoverom det inte är möjligt på de flesta pekenheter, emulerar iOS detta beteende, vilket resulterar i "klibbiga" hovringsstilar som kvarstår efter att ha tryckt på ett element. Dessa svävstilar tas bara bort när användare trycker på ett annat element. Detta beteende anses i stort sett oönskat och verkar inte vara ett problem på Android- eller Windows-enheter.
Under hela våra v4 alfa- och betaversioner inkluderade vi ofullständig och kommenterad kod för att välja ett mediefrågeunderlägg som skulle inaktivera hovringsstilar i pekenhetswebbläsare som emulerar hovring. Det här arbetet blev aldrig helt slutfört eller aktiverat, men för att undvika fullständigt brott har vi valt att fasa ut detta shim och behålla mixinerna som genvägar för pseudo-klasserna.
Utskrift
Även i vissa moderna webbläsare kan utskrift vara knäppt.
Från och med Safari v8.0 kan användning av klassen fast bredd .containergöra att Safari använder en ovanligt liten teckenstorlek vid utskrift. Se nummer #14868 och WebKit-fel #138192 för mer information. En möjlig lösning är följande CSS:
@media print {
.container {
width: auto;
}
}
Android lager webbläsare
Utanför förpackningen levereras Android 4.1 (och till och med några nyare versioner tydligen) med webbläsarappen som standardwebbläsare (i motsats till Chrome). Tyvärr har webbläsarappen massor av buggar och inkonsekvenser med CSS i allmänhet.
Välj meny
På <select>element visar Android aktiewebbläsaren inte sidokontrollerna om det finns en border-radiusoch/eller bordertillämpas. (Se den här StackOverflow-frågan för mer information.) Använd kodavsnittet nedan för att ta bort den stötande CSS-en och rendera den <select>som ett oformaterat element i Androids aktiewebbläsare. Användaragenten som sniffar undviker störningar i webbläsarna Chrome, Safari och Mozilla.
<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>
Vill du se ett exempel? Kolla in den här JS Bin-demon .
Validatorer
För att ge bästa möjliga upplevelse till gamla och buggiga webbläsare använder Bootstrap CSS-webbläsarhack på flera ställen för att rikta speciell CSS till vissa webbläsarversioner för att komma runt buggar i själva webbläsarna. Dessa hack får förståeligt nog CSS-validerare att klaga på att de är ogiltiga. På ett par ställen använder vi också avancerade CSS-funktioner som ännu inte är helt standardiserade, men dessa används enbart för progressiv förbättring.
Dessa valideringsvarningar spelar ingen roll i praktiken eftersom den icke-hackiga delen av vår CSS valideras fullt ut och de hackiga delarna inte stör den korrekta funktionen av den icke-hackiga delen, varför vi medvetet ignorerar dessa varningar.
Våra HTML-dokument har också några triviala och oviktiga HTML-valideringsvarningar på grund av att vi inkluderade en lösning för en viss Firefox-bugg .