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.