Source

Browser e dispositivi

Scopri i browser e i dispositivi, dai moderni ai vecchi, supportati da Bootstrap, inclusi bug e stranezze noti per ciascuno.

Browser supportati

Bootstrap supporta le ultime versioni stabili di tutti i principali browser e piattaforme. Su Windows, supportiamo Internet Explorer 10-11 / Microsoft Edge .

I browser alternativi che utilizzano l'ultima versione di WebKit, Blink o Gecko, direttamente o tramite l'API di visualizzazione Web della piattaforma, non sono esplicitamente supportati. Tuttavia, Bootstrap dovrebbe (nella maggior parte dei casi) essere visualizzato e funzionare correttamente anche in questi browser. Di seguito sono fornite informazioni di supporto più specifiche.

Puoi trovare la nostra gamma di browser supportati e le loro versioni nel nostro.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

Utilizziamo il prefisso automatico per gestire il supporto del browser previsto tramite i prefissi CSS, che utilizza Browserslist per gestire queste versioni del browser. Consulta la loro documentazione per come integrare questi strumenti nei tuoi progetti.

Dispositivi mobili

In generale, Bootstrap supporta le ultime versioni dei browser predefiniti di ciascuna delle principali piattaforme. Tieni presente che i browser proxy (come Opera Mini, la modalità Turbo di Opera Mobile, UC Browser Mini, Amazon Silk) non sono supportati.

Cromo Firefox Safari Browser Android e visualizzazione Web Microsoft Edge
Androide Supportato Supportato N / A Android v5.0+ supportato Supportato
iOS Supportato Supportato Supportato N / A Supportato
Windows 10 Mobile N / A N / A N / A N / A Supportato

Browser desktop

Allo stesso modo, sono supportate le ultime versioni della maggior parte dei browser desktop.

Cromo Firefox Internet Explorer Microsoft Edge musica lirica Safari
Mac Supportato Supportato N / A N / A Supportato Supportato
finestre Supportato Supportato Supportato, IE10+ Supportato Supportato Non supportato

Per Firefox, oltre all'ultima versione stabile normale, supportiamo anche l'ultima versione Extended Support Release (ESR) di Firefox.

Ufficiosamente, Bootstrap dovrebbe apparire e comportarsi abbastanza bene in Chromium e Chrome per Linux, Firefox per Linux e Internet Explorer 9, sebbene non siano ufficialmente supportati.

Per un elenco di alcuni dei bug del browser con cui Bootstrap deve confrontarsi, consulta il nostro Muro dei bug del browser .

Internet Explorer

Internet Explorer 10+ è supportato; IE9 e giù non lo è. Tieni presente che alcune proprietà CSS3 ed elementi HTML5 non sono completamente supportati in IE10 o richiedono proprietà prefissate per la piena funzionalità. Visita Posso usare... per i dettagli sul supporto del browser delle funzionalità CSS3 e HTML5. Se hai bisogno del supporto di IE8-9, usa Bootstrap 3.

Modali e menu a discesa su dispositivi mobili

Overflow e scorrimento

Il supporto per overflow: hidden;l' <body>elemento è piuttosto limitato in iOS e Android. A tal fine, quando scorri oltre la parte superiore o inferiore di una modale in uno dei browser di questi dispositivi, il <body>contenuto inizierà a scorrere. Vedi il bug di Chrome n. 175502 (risolto in Chrome v40) e il bug di WebKit n. 153852 .

Campi di testo iOS e scorrimento

A partire da iOS 9.2, mentre un modale è aperto, se il tocco iniziale di un gesto di scorrimento è all'interno del confine di un testo <input>o di un <textarea>, il <body>contenuto sotto il modale verrà fatto scorrere invece del modale stesso. Vedere il bug di WebKit n. 153856 .

L' .dropdown-backdropelemento non viene utilizzato in iOS nella navigazione a causa della complessità dell'indicizzazione z. Pertanto, per chiudere i menu a discesa nelle barre di navigazione, è necessario fare clic direttamente sull'elemento a discesa (o su qualsiasi altro elemento che attiverà un evento click in iOS ).

Zoom del browser

Lo zoom della pagina presenta inevitabilmente artefatti di rendering in alcuni componenti, sia in Bootstrap che nel resto del web. A seconda del problema, potremmo essere in grado di risolverlo (cerca prima e poi apri un problema, se necessario). Tuttavia, tendiamo a ignorarli poiché spesso non hanno una soluzione diretta diversa da soluzioni alternative hacky.

Appiccicoso :hover/ :focussu iOS

Sebbene :hovernon sia possibile sulla maggior parte dei dispositivi touch, iOS emula questo comportamento, risultando in stili al passaggio del mouse "appiccicosi" che persistono dopo aver toccato un elemento. Questi stili al passaggio del mouse vengono rimossi solo quando gli utenti toccano un altro elemento. Questo comportamento è considerato in gran parte indesiderabile e sembra non essere un problema su dispositivi Android o Windows.

In tutte le nostre versioni alfa e beta v4, abbiamo incluso un codice incompleto e commentato per l'attivazione di uno shim di query multimediali che disabiliterebbe gli stili al passaggio del mouse nei browser dei dispositivi touch che emulano il passaggio del mouse. Questo lavoro non è mai stato completamente completato o abilitato, ma per evitare la rottura completa, abbiamo deciso di deprecare questo shim e mantenere i mixin come scorciatoie per le pseudo-classi.

Stampa

Anche in alcuni browser moderni, la stampa può essere bizzarra.

A partire da Safari v8.0, l'uso della classe a larghezza fissa .containerpuò far sì che Safari utilizzi una dimensione del carattere insolitamente piccola durante la stampa. Vedere il problema n. 14868 e il bug di WebKit n. 138192 per maggiori dettagli. Una potenziale soluzione alternativa è il seguente CSS:

@media print {
  .container {
    width: auto;
  }
}

Browser per azioni Android

Per impostazione predefinita, Android 4.1 (e apparentemente anche alcune versioni più recenti) viene fornito con l'app Browser come browser Web predefinito preferito (al contrario di Chrome). Sfortunatamente, l'app Browser ha molti bug e incongruenze con i CSS in generale.

Seleziona menu

Sugli <select>elementi, il browser stock Android non visualizzerà i controlli laterali se è presente un border-radiuse/o borderapplicato. (Vedi questa domanda StackOverflow per i dettagli.) Usa lo snippet di codice qui sotto per rimuovere il CSS offensivo e renderizzalo <select>come elemento senza stile nel browser stock Android. Lo sniffing dell'agente utente evita interferenze con i browser Chrome, Safari e 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>

Vuoi vedere un esempio? Dai un'occhiata a questa demo di JS Bin .

Validatori

Al fine di fornire la migliore esperienza possibile a browser vecchi e con bug, Bootstrap utilizza hack del browser CSS in diversi punti per indirizzare CSS speciali a determinate versioni del browser al fine di aggirare i bug nei browser stessi. Questi hack comprensibilmente fanno sì che i validatori CSS si lamentino di non essere validi. In un paio di punti, utilizziamo anche funzionalità CSS all'avanguardia che non sono ancora completamente standardizzate, ma vengono utilizzate esclusivamente per il miglioramento progressivo.

Questi avvisi di convalida non contano in pratica poiché la parte non hackerata del nostro CSS si convalida completamente e le parti non modificate non interferiscono con il corretto funzionamento della parte non hackerata, quindi perché ignoriamo deliberatamente questi particolari avvisi.

Anche i nostri documenti HTML contengono alcuni avvisi di convalida HTML banali e irrilevanti a causa della nostra inclusione di una soluzione alternativa per un determinato bug di Firefox .