Share
Durante la investigación de esta serie, me he encontrado con una serie de problemas potenciales, todos los cuales te causarán un poco de dolor, ya sea con la transición de v2 a v3, o incluso al saltar directamente a v3.
Algunos de estos también son aplicables a v2, pero en general los incluyo aquí porque me mordieron y me dejaron rascándome la cabeza en muchos casos.
Este dolía, realmente dolía. Durante aproximadamente una semana y media, estaba dando vueltas en círculos, tratando de averiguar por qué mi diseño bien diseñado no se mostraba como se esperaba en la última versión de IE11..
Resultó que tenía un malformado metaetiqueta del dispositivo.
Como recordará del libro de BS2, hay una plantilla básica que se recomienda como punto de partida para todos los sitios basados en el marco de Bootstrap. Se ve algo como esto:
Mi sitio
Si te fijas en el metaetiqueta dentro de la cabezaVerá que tenemos claves de compatibilidad allí para permitir que el moderno motor de renderización de IE sepa qué es y qué no es compatible al tratar de renderizar cosas de una manera compatible con versiones anteriores..
En BS3, nada de esto funciona correctamente. En su lugar, el método recomendado es eliminar todas las claves de tipo de contenido, dejando SÓLO IE = EDGE, y no otros.
La mejor manera de hacer esto es crear un diseño que funcione perfectamente de manera estándar HTML5, incluir las distintas versiones, luego forzar al depurador de IE a adoptar una versión específica o hacer algo en la fuente del documento que obligará a IE a intente renderizar el contenido de una manera que lo haría con IE9 o anterior.
Una y otra vez, miré el metaEtiqueta, sin darse cuenta de que era la causa de mis problemas. Por lo tanto, si obtiene errores de representación extraños en IE11, eche un vistazo al depurador y vea en qué modo cree IE que debería estar mostrando su página en.
Sí gente, otro problema relacionado con IE. IE10 no puede decir la diferencia entre ancho del dispositivo y ancho de la ventana; El resultado de esto es que IE10 hace que sus consultas de medios CSS sean erróneas muchas veces (no solo en Bootstrap, sino también en otros marcos). La solución es bastante simple: agregue una regla de CSS ficticia a los estilos CSS de todo el sitio que se parece a esto:
@ -ms-viewport width: device-width;
Eso generalmente arregla las cosas, excepto en un caso. Con las versiones de Windows Phone anteriores a la Actualización 3, el dispositivo no interpretará las cosas correctamente y colocará la página en la vista de escritorio. Para solucionar este problema, se necesitan las siguientes reglas CSS y el código JavaScript:
@ -webkit-viewport width: device-width; @ -moz-viewport width: device-width; @ -ms-viewport width: device-width; @ -o-viewport ancho: ancho del dispositivo; @viewport ancho: ancho del dispositivo;
Accentsconagua
“If (navigator.userAgent.match (/IEMobile\/10\.0/)) var msViewportStyle = document.createElement ('style') msViewportStyle .appendChild (document.createTextNode ('@ -ms-viewport width: auto ! important ')) document.querySelector (' head '). appendChild (msViewportStyle) "Sin embargo, no puedo reconocer esta solución, ya que está claramente detallado en la documentación en línea de BS3. También hay más información sobre el tema en las directrices para desarrolladores de Windows 8.
En algunas versiones de Safari, el motor de renderizado tiene problemas con el número de decimales en valores porcentuales.
Estos porcentajes se utilizan a menudo en el col - * - 1clases de cuadrícula, y como resultado, verá errores en la representación de diseños de 12 columnas cuando se encuentre esto.
Hay un error abierto en el sistema de informe de errores BS3, pero hay poco que puedan hacer para resolverlo. Los documentos BS3 sugieren intentar agregar un tirar a la derechaa su última columna, pero el mejor curso de resolución parece ser un ajuste manual de sus valores basados en porcentajes hasta que se encuentre un saldo.
En este momento, las versiones de Android 4.1 y superiores se entregan con la aplicación "Navegador" como navegador web predeterminado. BS3 (y muchos otros) no se procesan correctamente en la aplicación del navegador debido a la gran cantidad de problemas en la base del código del navegador, y más aún en el motor CSS donde hay una gran cantidad de problemas conocidos.
Existe una solución basada en JavaScript para aplicar parches a sus diseños en los documentos de BS3, pero la mejor resolución es que el usuario use la aplicación Chrome, que es, con mucho, un navegador mejor y más estable para Android en general..
Hay muchas cosas más que tener en cuenta y, una vez más, la mayoría de ellas están documentadas en los documentos de BS3 y cubren aspectos como el zoom basado en pellizcos, los teclados virtuales y cómo reaccionan los diferentes tipos de puertos de vista cuando se trata de consultas de medios..
De hecho, un análisis rápido de los problemas más comunes en el desbordamiento de pila nos dice que muchos de los problemas giran en torno al desplazamiento, el cambio de tamaño, el zoom y los problemas generales en la pantalla táctil que parecen derivarse de cosas demasiado pequeñas o no ser lo suficientemente sensible para el tamaño promedio de los dedos.
Muchos de estos problemas de tamaño se pueden resolver descargando la distribución de origen de BS3 y modificando la opción Menosvariables y combinaciones disponibles, o personalizando cosas utilizando las herramientas de personalización disponibles; ahora ya no es una buena idea descargar y usar BS3 a menos que solo esté apuntando a aplicaciones de escritorio.
Si está apuntando a múltiples plataformas y espera una respuesta completa, entonces realmente necesita hacer mucha personalización en los ganchos provistos por los autores del marco.
Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.
