Imagen diferente dependiendo del dispositivo

freikorp

Zeta

• 23 Sep 2014

• #1

Hola,

Tengo una duda y no sé si será este el lugar adecuado, aunque espero que si.
Resulta que quisiera saber como se hace para que una imagen que tengamos en una web, al ser visitada desde dispositivos moviles o tablets, salga otra imagen diferente.
Me da que debe ser algo de código php, pero no acaba de dar en el clavo, y quizás sea más fácil de lo que pienso.

Alguien me puede contar?

 

kanikase

Préstamo

Ómicron

Programador

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 23 Sep 2014

• #2

Detectando el user-agent :encouragement: busca en Golgle como hacerlo.

 

S

S3RGI0

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 23 Sep 2014

• #3

Hola si te refieres a detectar el S.O, puedes usar la siguiente clase:

Mobile Detect - lightweight PHP class for detecting mobile devices (including tablets)

Ahora que si te refieres a detectar que sea smartphone o tablet (en general), puedes utilizar la media queries ejemplo:

http://css-tricks.com/css-media-queries/

 

freikorp

Zeta

• 23 Sep 2014

• #4

Bueno, gracias por las respuestas, [MENTION=81006]kanikase[/MENTION] y @S3RGIO pero nose si se ha entendido bien mi duda.
Por ejemplo, tengo una imagen con un texto, me sale la misma tanto en pc como movil, la idea es, que cuando salga en movil, salga otra imagen con otro texto..es muy complicado de realizar?
Entiendo que antes de eso se deberá detectar el dispositivo, pero, luego como se hace para decirle, eh, cuando te vean desde movil carga esta imagen.
Hay algún código predefinido?

 

kanikase

Préstamo

Ómicron

Programador

Verificación en dos pasos activada

Verificado por Whatsapp

¡Ha verificado su Paypal!

• 23 Sep 2014

• #5

Así se puede hacer:

Insertar CODE, HTML o PHP:

var movil = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

if(movil) {
   // Aquí lo que harás
}

 

freikorp

Zeta

• 23 Sep 2014

• #6

Te he enviado mp:fatigue:

kanikase dijo:

Así se puede hacer:

Insertar CODE, HTML o PHP:

var movil = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

if(movil) {
   // Aquí lo que harás
}

Hacer clic para expandir...

 

M

miquelcamps

Beta

Programador

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 23 Sep 2014

• #7

hola freikorp,

lo que quieres hacer yo lo haría con css media queries, aquí te dejo un ejemplo de código:
Edit fiddle - JSFiddle

creo que es sencillo de entender, por una parte hay html y por otra css, por defecto las capas div estarían ocultas y según la resolución del dispositivo con el que navegues se mostrará una imagen y un texto.

espero que te sirva de ayuda 😉