Source

navegadores y dispositivos

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

Navegadores compatibles

Bootstrap es compatible con las últimas versiones estables de todos 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.

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 de Android y WebView Borde de Microsoft
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 Borde de Microsoft Ópera Safari
Mac Soportado Soportado N / A N / A 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 de versión de soporte extendido (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 oficialmente no son compatibles.

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

explorador de Internet

Se admite Internet Explorer 10+; IE9 y abajo 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 CSS3 y HTML5?

Si necesita compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable de nuestro código y aún cuenta con el respaldo de nuestro equipo para correcciones de errores críticos y cambios en la documentación. Sin embargo, no se le agregarán nuevas características.

Modales y menús desplegables en dispositivos móviles

Desbordamiento y desplazamiento

El soporte para overflow: hidden;on the <body>element es bastante limitado 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 iOS y desplazamiento

A partir de iOS 9.2, mientras un modal está abierto, si el toque inicial de un gesto de desplazamiento está dentro de los límites de un texto <input>o un <textarea>, el <body>contenido debajo del modal se desplazará en lugar del propio modal. Consulte el error n.º 153856 de WebKit .

El .dropdown-backdropelemento 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 en cualquier otro elemento que active un evento de clic en iOS ).

Zoom del navegador

El zoom de página inevitablemente presenta 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 soluciones alternativas.

Adhesivo :hover/ :focusen iOS

Si bien :hoverno 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 parece no 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ó ni se habilitó por completo, pero para evitar la rotura total, optamos por desaprobar esta corrección y mantener los mixins como accesos directos para las pseudoclases.

Impresión

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

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

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

Navegador de acciones de Android

Fuera de la caja, Android 4.1 (e incluso algunas versiones más recientes aparentemente) se envían con la aplicación del 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 <select>los elementos, el navegador de valores de Android no mostrará los controles laterales si hay un border-radiusy/o borderaplicado. (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? Mira 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 dirigir CSS especial a ciertas versiones del navegador con el fin de evitar errores en los propios navegadores. Es comprensible que estos hacks hagan que los validadores de CSS se quejen de que no son válidos. En un par de lugares, también utilizamos funciones de CSS de última generación que aún no están completamente estandarizadas, pero se utilizan únicamente para la mejora progresiva.

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 porciones pirateadas no interfieren con el funcionamiento adecuado de la porción no pirateada, por lo que ignoramos deliberadamente estas advertencias en particular.

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