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.
Puede encontrar nuestra gama de navegadores admitidos 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 la compatibilidad prevista 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 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 | 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 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.
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 .
Menús desplegables de la barra de navegación
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? Echa un vistazo a 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 .