Navegadors i dispositius
Obteniu informació sobre els navegadors i els dispositius, des dels més moderns fins als antics, que són compatibles amb Bootstrap, incloses les peculiaritats i els errors coneguts de cadascun.
Navegadors compatibles
Bootstrap és compatible amb les versions més recents i estables de tots els navegadors i plataformes principals. A Windows, admetem Internet Explorer 10-11 / Microsoft Edge .
Els navegadors alternatius que utilitzen la darrera versió de WebKit, Blink o Gecko, ja sigui directament o mitjançant l'API de visualització web de la plataforma, no són compatibles explícitament. Tanmateix, Bootstrap també hauria de mostrar-se i funcionar correctament (en la majoria dels casos) en aquests navegadors. A continuació es proporciona informació de suport més específica.
Podeu trobar la nostra gamma de navegadors compatibles i les seves versions al nostre.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
Utilitzem Autoprefixer per gestionar la compatibilitat amb el navegador previst mitjançant prefixos CSS, que utilitza Browserslist per gestionar aquestes versions del navegador. Consulteu la seva documentació per saber com integrar aquestes eines als vostres projectes.
Dispositius mòbils
En termes generals, Bootstrap admet les últimes versions dels navegadors predeterminats de cada plataforma principal. Tingueu en compte que els navegadors intermediaris (com Opera Mini, el mode Turbo d'Opera Mobile, UC Browser Mini, Amazon Silk) no són compatibles.
| Chrome | Firefox | Safari | Navegador Android i WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Admet | Admet | N/A | Admet Android v5.0+ | Admet |
| iOS | Admet | Admet | Admet | N/A | Admet |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Admet |
Navegadors d'escriptori
De la mateixa manera, s'admeten les últimes versions de la majoria de navegadors d'escriptori.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Òpera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Admet | Admet | N/A | Admet | Admet | Admet |
| Windows | Admet | Admet | Admet, IE10+ | Admet | Admet | No compatible |
Per al Firefox, a més de l'última versió estable normal, també admetem l'última versió Extended Support Release (ESR) de Firefox.
Extraoficialment, Bootstrap hauria de tenir un aspecte i comportar-se prou bé a Chromium i Chrome per a Linux, Firefox per a Linux i Internet Explorer 9, tot i que no són compatibles oficialment.
Per obtenir una llista d'alguns dels errors del navegador amb què ha de lluitar Bootstrap, consulteu el nostre Mur d'errors del navegador .
Internet Explorer
S'admet Internet Explorer 10+; IE9 i cap avall no ho és. Tingueu en compte que algunes propietats CSS3 i elements HTML5 no són totalment compatibles amb IE10 o requereixen propietats prefixades per a una funcionalitat completa. Visiteu Puc utilitzar... per obtenir més informació sobre la compatibilitat del navegador amb les funcions CSS3 i HTML5. Si necessiteu suport IE8-9, feu servir Bootstrap 3.
Modals i desplegables al mòbil
Desbordament i desplaçament
El suport per overflow: hidden;a l' <body>element és força limitat a iOS i Android. Amb aquesta finalitat, quan us desplaceu més enllà de la part superior o inferior d'un modal en qualsevol dels navegadors d'aquests dispositius, el <body>contingut començarà a desplaçar-se. Vegeu l'error de Chrome #175502 (solucionat a Chrome v40) i l' error de WebKit #153852 .
Camps de text d'iOS i desplaçament
A partir d'iOS 9.2, mentre un modal està obert, si el toc inicial d'un gest de desplaçament es troba dins del límit d'un text <input>o d'un <textarea>, el <body>contingut que hi ha a sota del modal es desplaçarà en lloc del propi modal. Vegeu l'error de WebKit #153856 .
Menú desplegable de la barra de navegació
L' .dropdown-backdropelement no s'utilitza a iOS al navegador a causa de la complexitat de la indexació z. Així, per tancar els menús desplegables a les barres de navegació, heu de fer clic directament a l'element desplegable (o qualsevol altre element que desencadenarà un esdeveniment de clic a iOS ).
Ampliació del navegador
El zoom de la pàgina presenta inevitablement artefactes de renderització en alguns components, tant a Bootstrap com a la resta del web. Depenent del problema, és possible que puguem solucionar-lo (cerqueu primer i després obriu un problema si cal). Tanmateix, tendim a ignorar-los, ja que sovint no tenen una solució directa que no siguin solucions alternatives.
Sticky :hover/ :focusa iOS
Tot i que :hoverno és possible a la majoria de dispositius tàctils, iOS emula aquest comportament, donant lloc a estils de desplaçament "enganxosos" que persisteixen després de tocar un element. Aquests estils de passar el cursor només s'eliminen quan els usuaris toquen un altre element. Aquest comportament es considera en gran part indesitjable i sembla que no és un problema en dispositius Android o Windows.
Al llarg de les nostres versions alfa i beta v4, hem inclòs codi incomplet i comentat per optar per un shim de consulta de mitjans que desactivaria els estils de desplaçament del cursor als navegadors de dispositius tàctils que emulen el desplaçament. Aquest treball mai no es va completar ni es va habilitar completament, però per evitar un trencament complet, hem optat per desestimar aquest shim i mantenir els mixins com a dreceres per a les pseudo-classes.
Impressió
Fins i tot en alguns navegadors moderns, la impressió pot ser peculiar.
A partir de Safari v8.0, l'ús de la .containerclasse d'amplada fixa pot fer que Safari utilitzi una mida de lletra inusualment petita quan imprimeix. Vegeu el problema #14868 i l'error de WebKit #138192 per obtenir més detalls. Una possible solució alternativa és el següent CSS:
@media print {
.container {
width: auto;
}
}
Navegador de valors d'Android
Fora de la caixa, Android 4.1 (i fins i tot algunes versions més recents aparentment) s'envien amb l'aplicació Navegador com a navegador web predeterminat escollit (a diferència de Chrome). Malauradament, l'aplicació Navegador té molts errors i inconsistències amb CSS en general.
Seleccioneu el menú
En <select>elements, el navegador d'estoc d'Android no mostrarà els controls laterals si hi ha un border-radiusi/o borderaplicat. (Consulteu aquesta pregunta de StackOverflow per obtenir més informació.) Utilitzeu el fragment de codi següent per eliminar el CSS ofensiu i representar-lo <select>com a element sense estil al navegador d'Android. El rastreig de l'agent d'usuari evita interferències amb els navegadors Chrome, Safari i 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>
Vols veure un exemple? Fes una ullada a aquesta demostració de JS Bin .
Validadors
Per tal d'oferir la millor experiència possible als navegadors antics i amb errors, Bootstrap utilitza pirates del navegador CSS en diversos llocs per orientar CSS especials a determinades versions del navegador per evitar errors dels mateixos navegadors. És comprensible que aquests pirates facin que els validadors CSS es queixin que no són vàlids. En un parell de llocs, també utilitzem funcions CSS d'avantguarda que encara no estan totalment estandarditzades, però que s'utilitzen exclusivament per a una millora progressiva.
Aquests avisos de validació no tenen importància a la pràctica, ja que la part no piratejada del nostre CSS es valida completament i les porcions hacky no interfereixen amb el bon funcionament de la part no hacky, per això ignorem deliberadament aquestes advertències particulars.
Els nostres documents HTML també tenen alguns avisos de validació HTML trivials i sense conseqüències a causa de la nostra inclusió d'una solució alternativa per a un determinat error de Firefox .