Navegadores e dispositivos
Obtén información sobre os navegadores e dispositivos, desde os modernos ata os antigos, que son compatibles con Bootstrap, incluíndo peculiaridades e erros coñecidos de cada un.
Bootstrap admite as versións máis recentes e estables dos principais navegadores e plataformas. En Windows, admitimos Internet Explorer 10-11/Microsoft Edge .
Os navegadores alternativos que usan a versión máis recente de WebKit, Blink ou Gecko, directamente ou a través da API de visualización web da plataforma, non son compatibles explícitamente. Non obstante, Bootstrap debería (na maioría dos casos) mostrarse e funcionar correctamente nestes navegadores tamén. A continuación ofrécese información de asistencia máis específica.
Podes atopar a nosa gama de navegadores compatibles e as súas versións no nosopackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Usamos Autoprefixer para xestionar a compatibilidade do navegador previsto mediante prefixos CSS, que usa Browserslist para xestionar estas versións do navegador. Consulta a súa documentación para saber como integrar estas ferramentas nos teus proxectos.
En xeral, Bootstrap admite as últimas versións dos navegadores predeterminados de cada plataforma principal. Teña en conta que os navegadores proxy (como Opera Mini, o modo Turbo de Opera Mobile, UC Browser Mini, Amazon Silk) non son compatibles.
| Chrome | Firefox | Safari | Navegador Android e WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Soportado | Soportado | N / A | Compatible con Android v5.0+ | Soportado |
| iOS | Soportado | Soportado | Soportado | N / A | Soportado |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Soportado |
Do mesmo xeito, son compatibles as versións máis recentes da maioría dos navegadores de escritorio.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Ópera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Soportado | Soportado | N / A | N / A | Soportado | Soportado |
| Windows | Soportado | Soportado | Soportado, IE10+ | Soportado | Soportado | Non é compatible |
Para Firefox, ademais da última versión estable normal, tamén admitimos a versión máis recente de Extended Support Release (ESR) de Firefox.
Extraoficialmente, Bootstrap debería verse e comportarse o suficientemente ben en Chromium e Chrome para Linux, Firefox para Linux e Internet Explorer 9, aínda que non son compatibles oficialmente.
Para obter unha lista dalgúns dos erros do navegador cos que Bootstrap ten que lidiar, consulte o noso Muro de erros do navegador .
Admite Internet Explorer 10+; IE9 e abaixo non é. Teña en conta que algunhas propiedades CSS3 e elementos HTML5 non son totalmente compatibles con IE10 ou requiren propiedades prefixadas para a funcionalidade completa. Visita Podo usar... para obter máis información sobre a compatibilidade do navegador coas funcións CSS3 e HTML5.
Se precisas compatibilidade con IE8-9, utiliza Bootstrap 3. É a versión máis estable do noso código e o noso equipo aínda o admite para correccións de erros importantes e cambios na documentación. Non obstante, non se lle engadirán novas funcións.
O soporte para overflow: hidden;o <body>elemento é bastante limitado en iOS e Android. Para iso, cando te despraces pola parte superior ou inferior dun modal en calquera dos navegadores destes dispositivos, o <body>contido comezará a desprazarse. Consulte o erro de Chrome #175502 (solucionado en Chrome v40) e o erro de WebKit #153852 .
A partir de iOS 9.2, mentres un modal está aberto, se o toque inicial dun xesto de desprazamento está dentro do límite dun texto <input>ou un <textarea>, o <body>contido debaixo do modal desprazarase en lugar do propio modal. Consulte o erro de WebKit #153856 .
O .dropdown-backdropelemento non se usa en iOS no navegador debido á complexidade da indexación z. Así, para pechar menús despregables nas barras de navegación, debes facer clic directamente no elemento despregable (ou calquera outro elemento que desencadee un evento de clic en iOS ).
O zoom da páxina presenta inevitablemente artefactos de renderizado nalgúns compoñentes, tanto en Bootstrap como no resto da web. Dependendo do problema, é posible que poidamos solucionalo (busque primeiro e despois abra un problema se é necesario). Non obstante, tendemos a ignoralos xa que moitas veces non teñen unha solución directa que non sexan as solucións hackers.
Aínda :hoverque non é posible na maioría dos dispositivos táctiles, iOS emula este comportamento, dando como resultado estilos "pegañentos" que persisten despois de tocar un elemento. Estes estilos de rato só se eliminan cando os usuarios tocan outro elemento. Este comportamento considérase en gran parte indesexable e non parece ser un problema en dispositivos Android ou Windows.
Ao longo das nosas versións alfa e beta v4, incluímos código incompleto e comentado para optar por un shim de consulta de medios que desactivaría os estilos de desprazamento nos navegadores de dispositivos táctiles que emulan o cursor. Este traballo nunca se completou nin se habilitou por completo, pero para evitar a ruptura completa, optamos por desaprobar este shim e manter os mixins como atallos para as pseudoclases.
Mesmo nalgúns navegadores modernos, a impresión pode ser peculiar.
A partir de Safari v8.0, o uso da .containerclase de ancho fixo pode facer que Safari utilice un tamaño de letra inusualmente pequeno ao imprimir. Consulte o problema #14868 e o erro de WebKit #138192 para obter máis detalles. Unha posible solución é o seguinte CSS:
@media print {
.container {
width: auto;
}
}Fóra da caixa, Android 4.1 (e incluso algunhas versións máis recentes aparentemente) envíanse coa aplicación Navegador como o navegador web predeterminado preferido (a diferenza de Chrome). Desafortunadamente, a aplicación Navegador ten moitos erros e inconsistencias con CSS en xeral.
Nos <select>elementos, o navegador de accións de Android non mostrará os controis laterais se hai un border-radiuse/ou borderaplicado. (Consulta esta pregunta de StackOverflow para obter máis información.) Usa o fragmento de código que aparece a continuación para eliminar o CSS ofensivo e representalo <select>como un elemento sen estilo no navegador de accións de Android. O sniffing do axente de usuario evita interferencias cos navegadores 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>Queres ver un exemplo? Consulte esta demostración de JS Bin.
Co fin de ofrecer a mellor experiencia posible aos navegadores antigos e con erros, Bootstrap usa trucos de navegador CSS en varios lugares para orientar CSS especiais a determinadas versións do navegador para evitar erros nos propios navegadores. Estes pirateos fan que os validadores CSS se queixan de que non son válidos. En algúns lugares, tamén usamos funcións CSS de vangarda que aínda non están totalmente estandarizadas, pero que se usan exclusivamente para mellorar progresivamente.
Estas advertencias de validación non importan na práctica, xa que a parte non hacky do noso CSS valida por completo e as porcións hacky non interfiren co bo funcionamento da parte non hacky, polo que ignoramos deliberadamente estas advertencias particulares.
Os nosos documentos HTML tamén teñen algúns avisos de validación HTML triviais e intrascendentes debido á nosa inclusión dunha solución para un determinado erro de Firefox .