Navegadores y dispositivos

Obtenga información sobre los navegadores y dispositivos, desde los más modernos hasta los más antiguos, que son compatibles con Bootstrap, incluidas las peculiaridades y errores conocidos de cada uno.

Navegadores compatibles

Bootstrap es compatible con las últimas versiones estables de los principales navegadores y plataformas. En Windows, admitimos Internet Explorer 10-11 / Microsoft Edge .

Los navegadores alternativos que utilizan la última versión de WebKit, Blink o Gecko, ya sea directamente o mediante la API de vista web de la plataforma, no son compatibles explícitamente. Sin embargo, Bootstrap debería (en la mayoría de los casos) mostrarse y funcionar correctamente en estos navegadores también. A continuación, se proporciona información de soporte más específica.

Puede encontrar nuestra gama de navegadores compatibles y sus versiones en nuestro .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

Usamos Autoprefixer para manejar el soporte previsto del navegador a través de prefijos CSS, que usa Browserslist para administrar estas versiones del navegador. Consulte su documentación para saber cómo integrar estas herramientas en sus proyectos.

Dispositivos móviles

En términos generales, Bootstrap admite las últimas versiones de los navegadores predeterminados de cada plataforma principal. Tenga en cuenta que los navegadores proxy (como Opera Mini, el modo Turbo de Opera Mobile, UC Browser Mini, Amazon Silk) no son compatibles.

Cromo Firefox Safari Navegador y WebView de Android Microsoft Edge
Androide Soportado Soportado N / A Compatible con Android v5.0 + Soportado
iOS Soportado Soportado Soportado N / A Soportado
Windows 10 móvil N / A N / A N / A N / A Soportado

Navegadores de escritorio

Del mismo modo, se admiten las últimas versiones de la mayoría de los navegadores de escritorio.

Cromo Firefox explorador de Internet Microsoft Edge Ópera Safari
Mac Soportado Soportado N / A Soportado Soportado Soportado
Ventanas Soportado Soportado Compatible, IE10 + Soportado Soportado No soportado

Para Firefox, además de la última versión estable normal, también admitimos la última versión Extended Support Release (ESR) de Firefox.

Extraoficialmente, Bootstrap debería verse y comportarse lo suficientemente bien en Chromium y Chrome para Linux, Firefox para Linux e Internet Explorer 9, aunque no son oficialmente compatibles.

Para obtener una lista de algunos de los errores del navegador con los que Bootstrap tiene que lidiar, consulte nuestro Muro de errores del navegador .

explorador de Internet

Se admite Internet Explorer 10+; IE9 y versiones anteriores no lo es. Tenga en cuenta que algunas propiedades CSS3 y elementos HTML5 no son totalmente compatibles con IE10, o requieren propiedades prefijadas para una funcionalidad completa. Visite ¿Puedo usar… para obtener detalles sobre la compatibilidad del navegador con las funciones de CSS3 y HTML5? Si necesita compatibilidad con IE8-9, use Bootstrap 3.

Modales y menús desplegables en dispositivos móviles

Desbordamiento y desplazamiento

La compatibilidad con overflow: hidden; on the <body> element es bastante limitada en iOS y Android. Con ese fin, cuando se desplaza más allá de la parte superior o inferior de un modal en cualquiera de los navegadores de esos dispositivos, el <body> contenido comenzará a desplazarse. Consulte el error de Chrome n. ° 175502 (corregido en Chrome v40) y el error de WebKit n . ° 153852 .

Campos de texto y desplazamiento de iOS

A partir de iOS 9.2, mientras un modal está abierto, si el toque inicial de un gesto de desplazamiento está dentro del límite de un textual <input> o a <textarea> , el <body> contenido debajo del modal se desplazará en lugar del modal en sí. Consulte el error de WebKit # 153856 .

El .dropdown-backdrop elemento no se usa en iOS en la navegación debido a la complejidad de la indexación z. Por lo tanto, para cerrar los menús desplegables en las barras de navegación, debe hacer clic directamente en el elemento desplegable (o cualquier otro elemento que active un evento de clic en iOS ).

Zoom del navegador

El zoom de página presenta inevitablemente artefactos de representación en algunos componentes, tanto en Bootstrap como en el resto de la web. Dependiendo del problema, es posible que podamos solucionarlo (busque primero y luego abra un problema si es necesario). Sin embargo, tendemos a ignorarlos, ya que a menudo no tienen una solución directa más que los trucos.

Adhesivo :hover / :focus en iOS

Si bien :hover no es posible en la mayoría de los dispositivos táctiles, iOS emula este comportamiento, lo que da como resultado estilos de desplazamiento "pegajosos" que persisten después de tocar un elemento. Estos estilos de desplazamiento solo se eliminan cuando los usuarios tocan otro elemento. Este comportamiento se considera en gran medida indeseable y no parece ser un problema en los dispositivos Android o Windows.

A lo largo de nuestras versiones alfa y beta v4, incluimos código incompleto y comentado para optar por una corrección de consulta de medios que deshabilitaría los estilos de desplazamiento en los navegadores de dispositivos táctiles que emulan el desplazamiento. Este trabajo nunca se completó o habilitó por completo, pero para evitar la rotura total, hemos optado por desaprobar esta corrección y mantener los mixins como atajos para las pseudoclases.

Impresión

Incluso en algunos navegadores modernos, la impresión puede resultar peculiar.

A partir de Safari v8.0, el uso de la .container clase de ancho fijo puede hacer que Safari utilice un tamaño de fuente inusualmente pequeño al imprimir. Consulte el número 14868 y el error de WebKit n.º 138192 para obtener más detalles. Una posible solución alternativa es el siguiente CSS: 

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

Navegador de valores de Android

Fuera de la caja, Android 4.1 (e incluso algunas versiones más nuevas aparentemente) se envían con la aplicación Navegador como el navegador web predeterminado de elección (a diferencia de Chrome). Desafortunadamente, la aplicación del navegador tiene muchos errores e inconsistencias con CSS en general.

Seleccione el menú

En los <select> elementos, el navegador de valores de Android no mostrará los controles laterales si hay un border-radius y / o border aplicado. (Consulte esta pregunta de StackOverflow para obtener más detalles). Use el fragmento de código a continuación para eliminar el CSS ofensivo y representarlo <select> como un elemento sin estilo en el navegador de Android. El rastreo del agente de usuario evita la interferencia con los navegadores Chrome, Safari y 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>

¿Quieres ver un ejemplo? Vea esta demostración de JS Bin .

Validadores

Con el fin de proporcionar la mejor experiencia posible a los navegadores antiguos y con errores, Bootstrap utiliza hacks de navegador CSS en varios lugares para apuntar CSS especial a ciertas versiones del navegador con el fin de evitar errores en los navegadores mismos. Es comprensible que estos trucos hagan que los validadores de CSS se quejen de que no son válidos. En un par de lugares, también utilizamos funciones CSS de última generación que aún no están completamente estandarizadas, pero que se utilizan únicamente para mejoras progresivas.

Estas advertencias de validación no importan en la práctica, ya que la parte no pirateada de nuestro CSS se valida por completo y las partes no pirateadas no interfieren con el funcionamiento adecuado de la parte no pirateada, por lo que ignoramos deliberadamente estas advertencias particulares.

Nuestros documentos HTML también tienen algunas advertencias de validación HTML triviales e intrascendentes debido a nuestra inclusión de una solución para un cierto error de Firefox .