Consultor SEO

Experto en Wordpress y con conocimientos amplios sobre SEO y analítica web en general y Google analytics en particular

  • SEO
  • Analytics
  • Hosting
  • WordPress
  • Joomla
  • Blogger
  • Contacto
Home » General » CSS para iPhone y iPad

CSS para iPhone y iPad

17 diciembre, 2013 by Sirius 1 comentario

Pequeña chuleta de CSS para diseños responsive dirigidos a dispositivos como iphone y ipad

Hay que tener en cuenta la orientación del dispositivo. Horizontal (landscape) y vertical (portrait)

Orientación del ipad o iphone. landscape y portrait

 

iPad en portrait & landscape

Tabla de contenidos

  • 1 iPad en portrait & landscape
  • 2 iPad en landscape
  • 3 iPad en portrait
  • 4 Retina iPad en portrait & landscape
  • 5 Retina iPad en landscape
  • 6 Retina iPad en portrait
  • 7 iPad 1 & 2 in portrait & landscape
  • 8 iPad 1 & 2 in landscape
  • 9 iPad 1 & 2 in portrait
  • 10 iPad mini in portrait & landscape
  • 11 iPad mini in landscape
  • 12 iPad mini in portrait
  • 13 Resolución del iPad mini
@media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px) { /* ESTILO AQUI */}

iPad en landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape) { /* ESTILO AQUI */}

iPad en portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait) { /* ESTILO AQUI */ }

Retina iPad en portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */}

Retina iPad en landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */}

Retina iPad en portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */ }

iPad 1 & 2 in portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 1){ /* ESTILO AQUI */}

iPad 1 & 2 in landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad 1 & 2 in portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */ }

iPad mini in portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad mini in landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad mini in portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */ }

Resolución del iPad mini

 Screen Width = 768px (CSS Pixels)
 Screen Height = 1024px (CSS Pixels)
 Screen Width = 768px (Actual Pixels)
 Screen Height = 1024px (Actual Pixels)
 Device-pixel-ratio: 1

Texto original: http://www.stephentgilbert.com/mediaqueries/

Valora el artículo
1 Star2 Stars3 Stars4 Stars5 Stars (2 votos, promedio: 5,00 de 5)
Cargando...

Archivado en:General Etiquetado con:CSS

Comentarios

  1. Daniel D dice

    7 septiembre, 2015 en 1:19

    Muchas gracias por el aporte , saludos!!!

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Analítica Web

Presupuesto MKO

Hosting

  • Directadmin
  • Nginx
  • Varnish

Destacados

  • Arrays multidimensionales en PHP
  • Chuleta CSS
  • Biblia de la optimización de WordPress

Me puedes encontrar en

  • GitHub
  • LinkedIn
  • Twitter
Alojo la web en Digital Ocean
y uso
plantilla de Studiopress

Copyright © 2021 · News Pro Theme on Genesis Framework · WordPress · Iniciar sesión