Foros del Web » Creando para Internet » Diseño web »

Detección de anchura de dispositivo

Estas en el tema de Detección de anchura de dispositivo en el foro de Diseño web en Foros del Web. Hola. La idea es detectar la anchura del dispositivo para, a partir de un determinado width insertar el elemento, o dicho al contrario, para que ...
  #1 (permalink)  
Antiguo 25/10/2014, 09:28
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 19 años
Puntos: 8
Detección de anchura de dispositivo

Hola.

La idea es detectar la anchura del dispositivo para, a partir de un determinado width insertar el elemento, o dicho al contrario, para que sólo se inserte a partir de una determinada anchura.

El tema es que no quiero hacer lo que se suele hacer: cargarlo todo y luego esconderlo con css para los móviles y dispositivos pequeños porque es cargarles con tener que descargar un pedazo de chisme que luego no les sirve, creo que lo mejor es que ni siquiera se cargue.

Por supuesto, conozco las media queries, pero se trata de a lo largo del body ir colocando javascript (¿¿sí??), para que cuando el width sea mayor que tal "x", introducir el elemento que sea.

Lo que pregunto es si es la mejor forma de hacerlo o hay otra más adecuada para esto.

Gracias.
  #2 (permalink)  
Antiguo 25/10/2014, 16:35
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 9 meses
Puntos: 14
Respuesta: Detección de anchura de dispositivo

Dependiendo del sitio, se hace de dos maneras, con responsive design (en el cual se hace uso de media querys), o un diseño especifico para moviles. Si el rwp (responsive web design) no te sirve, puedes optar por hacer un diseño exclusivo para moviles. Ninguna es mejor que otra, simplemente se usa en casos distintos. Si aun asi quieres hacer lo que deseas, con jquery puedes hacerlo facilmente:
Código Javascript:
Ver original
  1. $('elemento').width();
  #3 (permalink)  
Antiguo 26/10/2014, 03:05
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 19 años
Puntos: 8
Respuesta: Detección de anchura de dispositivo

Se trata de un diseño responsivo que incluya los elementos a medida que son necesarios según anchura del dispositivo. No cargarlo todo y luego ir escondiendo esto o lo otro. ¿Para qué sirve incluir un slider con imágenes y jugadas que luego no se van a ver en dispositivos pequeños? ¿no es mejor cargarlo sólo a partir de cierto tamaño?

Por otro lado, no quiero hacer un sitio sólo para móviles.

Finalmente ¿hay algún inconveniente en usar javascript para ir metiendo las cosas en función del tamaño?

Gracias.
  #4 (permalink)  
Antiguo 26/10/2014, 12:20
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 9 meses
Puntos: 14
Respuesta: Detección de anchura de dispositivo

Mas allá de cargar la web con js innecesario, yo creo que te va a afectar muchísimo al seo. Como te digo, de poder lo puedes hacer, pero no es recomendado por los problemas que puede traer, y por ser ineficiente.
Si hay cosas que no quieres incluir en la vista de móviles, crea un diseño exclusivo, es mi consejo.
  #5 (permalink)  
Antiguo 26/11/2014, 05:40
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 19 años
Puntos: 8
Respuesta: Detección de anchura de dispositivo

En realidad se trata más que nada de las imágenes.

¿Qué pensáis del elemento picture the html5 tal y como se describe en este artículo?

http://www.hongkiat.com/blog/serving-responsive-images/

Puestos con las imágenes, ¿que creéis que es lo mejor para evitar javascript?

Un saludo.
  #6 (permalink)  
Antiguo 27/11/2014, 12:02
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Detección de anchura de dispositivo

Probablemente también habría que recurrir a un server side detection: https://www.google.com.mx/search?q=s...HZfBqAWi_4DoDA

Etiquetas: css, dispositivo, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:19.