JavaScript - compatibilidad web entre diferentes dispositivos

   
Vista:
Imágen de perfil de fran

compatibilidad web entre diferentes dispositivos

Publicado por fran (11 intervenciones) el 20/12/2013 16:01:13
Buenas tardes a todos, no se si es en este foro donde debo plantear esta consulta, asi que ya me direis.
Resulta que acabo de diseñar yo mismo una web pero ahora me surge la situacion de que debo hacerla compatible con los dispositivos moviles y ahi si que no se como hacerlo.
Se debe poner un link en html que automaticamente al entrar con dispositivo movil se cargue el css en cuestion o es mediate javascript?
que medidas hay que poner en css y que etiquetas para que se visualice correctamente?
Como veis son muchas dudas y no se por donde empezar asi que si alguien me pudiera ayudar y guiar en este ultimo paso se lo agradeceria; saludos.
Mi website: http://www.entre-bastidores.net
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

compatibilidad web entre diferentes dispositivos

Publicado por xve (1595 intervenciones) el 21/12/2013 10:09:42
Hola Fran, puedes diferenciar la hoja de estilos utilizando MediaQueries, que te permiten una serie de condiciones que nos permiten seleccionar una hoja de estilos especifica según las capacidades de cada dispositivo.

Utilizando los media queries puedes mostrar diferentes hojas de estilo optimizadas para la pantalla del equipo que te visita, un ejemplo básico que puedes usar es:

1
2
<!– Esta hoja de estilos se muestra si tu dispositivo tiene como máximo 480px de ancho.>
<link href="css/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />


1
2
<!– Este otro query solo se muestra en equipos de escritorio en una ventana de al menos 481px de ancho.>
<link href="css/escritorio.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" />

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de fran

compatibilidad web entre diferentes dispositivos

Publicado por fran (11 intervenciones) el 21/12/2013 12:23:27
Esta muy bien , gracias; lo mirare.
Pero despues en la hoja de estilos como saber que estilos poner a mi web para que se vea correctamente en esos dispositivos?
Medidas, px, el body, menu, etc; si me pudieran ayudar se lo agradeceria ya que despues de hacer mi web para pc me quede saturado. saludos y muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

compatibilidad web entre diferentes dispositivos

Publicado por xve (1595 intervenciones) el 21/12/2013 18:46:28
Hola Fran, es lo mismo que hacerlo para un pc, lo único que tienes que tener en cuenta que la anchura varia en los diferentes dispositivos.

por ejemplo:
1
2
3
4
iPhone 3G/3GS                320x480
iPhone 4/4S                  640x960
iPhone 5                     640x1136
Google Nexus 4 (LG)          768x1280

Si entramos en la infinidad de modelos Android, creo que abarcan todas las resoluciones...;)

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de fran

compatibilidad web entre diferentes dispositivos

Publicado por fran (11 intervenciones) el 22/12/2013 13:18:06
Y dime una cosa, no hay de alguna forma medidas estándar para que de alguna forma se vea "aceptable" en todos los dispositivos móviles? Gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

compatibilidad web entre diferentes dispositivos

Publicado por xve (1595 intervenciones) el 22/12/2013 20:40:45
Hola Fran, la otra manera, es utilizar lo que se denomina responsive o diseño web adaptativo, que yo creo que es como se tendrían que hacer hoy en día todas las webs, aunque dispone de un incremento de trabajo por parte de los diseñadores y maquetadores.
http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo

Espero que te sirva.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de fran

compatibilidad web entre diferentes dispositivos

Publicado por fran (11 intervenciones) el 23/12/2013 10:36:15
Muchas gracias por todas las informaciones; probaré todo lo que me has indicado y ya te contaré como me va a ver si lo sé hacer; hasta pronto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Fran

compatibilidad web entre diferentes dispositivos

Publicado por Fran (11 intervenciones) el 30/12/2013 16:12:25
Hola, he intentado hacer lo que me dijiste y no veo resultado:
puse esto en el html en el headl:

<link href="style/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

y esto en css:

nav{
width: 500px;
}
p.texto{
color: #000;
}

a ver si me puedes indicar que puedo hacer mal, saludos...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar