Cómo identificar móviles y tablets por CSS

Muchas veces haciendo webs tienes que poner configuraciones especiales para tablets o smartphones, o incluso para ipad, iphone o móviles diferentes. Porque quieras poner un vídeo de una resolución diferente,  o una imagen más pequeña, o deshabilitar ciertos módulos o divs para móviles o tablets que no sean realmente responsive. Os decimos como en resumen:

Para ello vamos a usar el comando de CSS media, que nos permite apuntar a varias características del dispositivo (por ejemplo máxima o mínima anchura,max-device-width,aunque también se puede identificar por orientación o por resolución, min-device-pixel-ratio).
Vamos a ver como ejemplo los iPad y los iPhone para entender el código. De ahí se puede extrapolar a todos los dispositivos.

  • IPAD: Afortunádamente Apple nos ha dejado identificar los iPad (1-5 y los mini) con el mismo comando.
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)  { /* aquí los estilos */}

    Si queremos diferenciar entre el iPad en vertical u horizontal podemos poner la siguiente línea:

    and (orientation : landscape)

    o

    and (orientation : portrait)

    antes de la parte de estilos ({/*…..*/} Esto se puede hacer en todos los apartados y modelos en este artículo.
    También puedes identificar modelos específicos de iPad con otros and. Más información aquí.

  • iPhone:  El iPhone 6 se puede identificar con este código:
    @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) { /* estilos */}

    El iPhone 6 plus:

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)

    El iPhone 5 y 5s:

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px)

    El iPhone 2G y 4G:

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px)

Al final para el resto de dispositivos puedes optimizar estas reglas. Por ejemplo yo suelo poner reglas para mmax-device-width: xxxpx  y otras para mayor. Así puedo identificar móviles, tablets etc. Al final, como quieres poder identificar un móvil, ya sabes que no va a tener mayor resolución que, en el momento actual, 700-800px. Con el tiempo este número puedes ir variándolo.

Con cosas como:

@media (max-width: 600px)

puedes identificar sólo dispositivos pequeños tipo móviles.

Deja un comentario

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Time limit is exhausted. Please reload CAPTCHA.