Problema con diseño responsive en Internet Explorer

[danidg86]

Hola.

Me presento en el foro y espero que mi pregunta no sea demasiado basica. Estoy haciendo mi primera pagina web en una empresa en un periodo de practicas, y tengo una dificultades que me desesperan y no y me permiten avanzar.

He terminado de diseñar una web en html y css. Tengo conocimientos basicos en Javascript pero no me ha sido necesario usarlo. La pagina es responsive, se adapta a cualquier tamaño de pantalla a traves de la opcion @media en los estilos css. Compruebo que funciona bien estrechando el scroll del navegador.

La pagina se ve perfectamente en Mozilla y Google Chrome, pero en Internet Explorer me da problemas segun en que ordenador lo habra.

En mi casa, con un windows vista y el Internet Explorer 9 funciona el diseño responsive.

En un ordenador de la empresa, con windows 7 e Internet Explorer 11 funciona el diseño responsive.

En otro ordenador de la empresa de mi jefe, con Windows 8 e Internet Explorer 11 no funciona el responsive. No funciona la opcion column para poner el texto en columnas. No funciona el border-radius. No respeta el codigo css en el que he quitado el color azul de los links por defecto.

En todas las versiones parece quitar o reducir el padding-top.

¿Que ocurre? ¿que puedo hacer para asegurarme de que el diseño responsive funciona en todos los Internet Explorer y sistemas operativos? ¿Como puedo diseñar la pagina de manera que no se destroce segun en que ordenador o version del explorer se abra?

Esta misma pagina que funciona en un ordenador de mesa en Firefox o Chrome, adaptandose el diseño a estrecharse el navegador sin problemas, aparece como un texto plano cuando la abro en el movil Samsung de mi jefe. Es como si no cojiera ningun estilo CSS. Un completo desastre.

¿Que esta ocurriendo? ¿Debo añadir algo al @media, a los estilos o a las etiquetas del html para que se vea en dispositivos distintos de pantallas de ordenador?

Muchas gracias por adelantado.

[pzin]

Bienvenido al foro.

Y según los problemas que cuentas, bienvenido al desarrollo web.

Son problemas habituales. Tienes que tener en cuenta que diferentes versiones de navegadores, son realmente navegadores diferentes. Hay cosas que nunca van a funcionar en una versión, porque al salir una versión ya se queda como está y no se añaden funcionalidades nuevas que si adoptarán las versiones futuras (o no).

Lo que si es muy extraño es que no te funcione border-radius o incluso lo de las columnas en IE11, ya que están soportados:

• http://caniuse.com/border-radius
• http://caniuse.com/multicolumn

Habría que ver el código o la web para ver qué pasa realmente.

Otra cosa también es dar un soporte lógico a ciertos navegadores. Yo no le daría soporte ninguno a IE9, es una versión poco usado y más bien de transición de la 8 a la 10 que dentro de no demasiado tenderá al 0% en cuanto al uso general.

[seozeta]

El Captcha protector se me acaba de cargar mi respuesta...

[seozeta]

Da igual, ahora hago un resumen sin explicaciones:

Usa eso:

Código HTML:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
 

Y eso:

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
 

Y los @media queries:

Código CSS:

@media only screen
and (max-width : 1024px) { }
 
@media only screen
and (min-width : 769px)
and (max-width : 1024px) { }
 
@media only screen
and (max-width : 768px) { }
 
@media only screen
and (min-width : 481px)
and (max-width : 768px) { }
 
@media only screen
and (max-width : 480px) { }
 
@media only screen
and (min-width : 321px)
and (max-width : 480px) { }
 
@media only screen
and (max-width : 320px) { }
 

Y polyfills, como Modernizr. Además de Google Fonts donde tendrás +600 fuentes para escoger. Con FontAwesome podrás crear +430 iconos vectoriales sin necesidad de usar imágenes png ni sprites, con lo que reducirás mucho la petición de archivos vía http.

Aquí tienes el uso de navegadores: http://www.w3schools.com/browsers/browsers_explorer.asp

Y lo del Can I use ahora me lo ahorro porque lo contó el compañero de arriba.

[danidg86]

Muchisimas gracias a los dos.

¿Me recomiendan el uso del fix respond.js para que las media-queries funcionen en IE 8 y hacia detras?

Y respecto a los mediaqueries, ¿deben ser esos que me da en concreto? ¿por que ha elegido esos?


Yo he tomado estos, que me dieron como modelo en mi formacion:

Código CSS:

@media screen and (min-width: 1001px)
 
@media screen and (max-width:1000px)
 
@media screen and (max-width:710px), screen and (max-device-width:480px)
 
@media screen and (max-width:370px)
 

¿Son correctos? Estrechando el scroll del navegador en un ordenador de mesa, funcionan.

¿Es posible que la pagina no se abra en un dispositivo movil por algun error en ellos? Como digo, en un movil Samsung de pantalla estrecha de mi jefe salio el texto plano, como si no "entrara" a los estilos css.

Muchas gracias.

[danidg86]

Tengo una nueva pregunta, porque no consigo avanzar:

Me han recomendado el uso de boiler template "para quitarme de problemas".

http://html5boilerplate.com/

Una vez que he terminado la pagina, ¿me cambiara muchas cosas al resetear estilos? ¿Solucionara mis problemas con IE y dispositivos moviles?
----

He seguido revisando que fallos hay con Internet Explorer. No parecen seguir ninguna coherencia. La pagina es responsive en el IE9 de mi casa, con windows Vista, y no lo es en la IE11 de mi jefe, con windows 8. Con Windows 7 y explorer 11 no hay columnas, si responsive. Es una locura.

Para IE8 e inferiores, no logro que sea responsive.

¿Influye el ordenador y el sistema operativo, ademas de la version, y resulta imposible hacer algo que funcione en todos los IE?

Para solucionar los problemas anteriores he probado a copiar el codigo meta y el comentario que solucionaba los problemas para IE9 de la respuesta anterior, el respond.js, el modernizr. Ninguno da resultado o no he logrado hacerlos funcionar.

He arreglado algun problema con el codigo css para cualquier version de IE (se reduce el padding-top sin explicacion aparente) mediante J-Query:

Código:

$(document).ready(function()
{
   var useragent=navigator.userAgent;
   var esie=useragent.indexOf("MSIE");
   
   if (esie!=-1)
   {
   alert('es explorer');    
   $('#menu>li').css({"padding-top":3+"px"});
   $('#menufooter>li').css({"padding-top":3+"px"});
   }
});

Logicamente, cuando el explorador no tiene activados los scripts no funciona. ¿Este metodo es una guarrada o es valido?.

¿Que hacer?

Siento tantas preguntas y que resulten poco concretas, pero estoy algo desbordado.

Gracias y un saludo.

[seozeta]

Iniciado por danidg86

Muchisimas gracias a los dos.

¿Me recomiendan el uso del fix respond.js para que las media-queries funcionen en IE 8 y hacia detras?

Y respecto a los mediaqueries, ¿deben ser esos que me da en concreto? ¿por que ha elegido esos?


Yo he tomado estos, que me dieron como modelo en mi formacion:

Código CSS:

@media screen and (min-width: 1001px)
 
@media screen and (max-width:1000px)
 
@media screen and (max-width:710px), screen and (max-device-width:480px)
 
@media screen and (max-width:370px)
 

¿Son correctos? Estrechando el scroll del navegador en un ordenador de mesa, funcionan.

¿Es posible que la pagina no se abra en un dispositivo movil por algun error en ellos? Como digo, en un movil Samsung de pantalla estrecha de mi jefe salio el texto plano, como si no "entrara" a los estilos css.

Muchas gracias.

Para que te funcionen los @media queries en IE8 o versiones inferiores es suficiente con poner esto en el head:

Código HTML:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
 

Los @media queries que te pasé era con el objetivo de que los compares con los tuyos y así poder analizar si tenías algo mal. Los anchos son lo de menos, ahí ya cada uno tendrá su propio esquema.

(Mi esquema se basa en las medidas estándard de dispositivos móviles: 320px, 480px, 768px, 1024px... Además los uso en dos fases: todo lo que tenga que ser inferior a 768px, por ejemplo, en uno, y lo que sea únicamente entre 480px y 768px en otro. Y así con cada rango. Pero eso ya va a gustos. Tu esquema me parece bien, lo importante es que cumpla con la solución que deseas implementar).

[seozeta]

Logicamente, cuando el explorador no tiene activados los scripts no funciona. ¿Este metodo es una guarrada o es valido?.

Es válido. De hecho, muchos responsive necesitan usar Javascript y/o jQuery para funcionar debidamente. Ejemplos de funcionalidades Javascript que uso en mi diseño:

- El botón scroll to top que aparece cuando haces scroll down.
- El menú superior, que en su lugar aparece un botón con un desplegable.
- Transformar el menú principal en un select y añadirle "-" (guiones) a los enlaces de un submenú, dos guiones "--" a los enlaces de un submenú de un submenú, etc.
- Que se muestre el placeholder en todos los navegadores. Encontré un script para ello y funciona muy bien.
- En el menú principal que se queda fijado en la parte superior, calcular su alto determinado en cada caso para reajustar su contenedor y que cuando se quede fijado no haya un salto de línea como ocurre en la mayoría de webs que lo usan.
- O también, cambiar el color de un fieldset cuando hago focus en un input. Eso en CSS no se puede.
- Incluso para mantener el ancho del sidebar y que se recalcule el ancho del contenido. Eso sí se podría con CSS usando calc(Npx - Z%) pero está muy verde en los navegadores.
- Y en resumen, para todo tipo de polyfills.

[pzin]

Iniciado por seozeta

Eso sí se podría con CSS usando calc(Npx - Z%) pero está muy verde en los navegadores.

Está verde, si.

[danidg86]

Gracias por contestar.

He puesto exactamente esto en la cabecera del documento, debajo de los estilos css y encima del resto de Scripts. Sigue sin funcionarme el responsive en IE9 y anteriores. ¿Hago algo mal? ¿Es obligatorio quitar o poner algun meta?

Código:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

--

Si dependemos de Jquery o Javascript, no queda bien que una pagina salga medio destrozada si el navegador no aceptar scripts.

Continuo con las mismas dudas que antes respecto a Internet Explorer y sus versiones locas.

[pzin]

Iniciado por danidg86

Si dependemos de Jquery o Javascript, no queda bien que una pagina salga medio destrozada si el navegador no aceptar scripts.

Y no te falta razón. Pero por otro lado, piensa que alguien que se ha tomado la molestia de desactivar JavaScript, es también probable que se haya preocupado de no andar con un navegador obsoleto.

Iniciado por danidg86

Continuo con las mismas dudas que antes respecto a Internet Explorer y sus versiones locas.

Yo personalmente no daría soporte a versiones anteriores a IE10.

[seozeta]

Está verde, si.

xD, me refería a los que no están en verde: IE8, IE9... Ya no considero que valga la pena hacer algo para IE6 y 7, pero para las versiones 8 y 9 de momento, sí. Y las más recientes.