Configurar sitio o blog para iPhone o iPad

Hoy en día el uso generalizado de los móviles hace que a los diseñadores web les resulte un tanto más difícil adaptar sus sitios a estos smarthphones y tablets. Y es que si piensas en una solución fácil encontrarás que lo ideal sería hacer toda la página de nuevo pero a escala pequeña, para luego reedireccionarla, sin embargo hay otra solución.

A continuación vamos a aprender una parte de CSS que nos va a servir para configurar un sitio o blog para iPhone o iPad, sin necesidad de tener que hacer el sitio web o el blog de nuevo.

El uso de queries

En CSS hay una parte fundamental hoy en estos días de internet, llamada “query” que podría traducirse como preguntas o filtros para entenderlo mejor. Este parámetro nos permite filtrar los estilos CSS que tengamos dentro de ese apartado para que sólo se ejecute el estilo cuando se cumples ciertos requisitos, que en esta ocasión es sobre pantalla.

iPhone y iPad

Como muchos saben los iPhones y iPads tienen sus propias dimensiones de pantalla que los difieren de las computadoras normales, y es ese aspecto el que se aprovecha para poder lograr un sitio web adaptado. Y menciono estos dos porque en general su soporte es el mejor que los demás navegadores, aunque también llega a servir en otros dispositivos móviles.

Entonces, a pesar de que se podría pensar que tienen un tamaño de pantalla fijo no es cierto, ya que hay modo retrato y apaisado, lo que haría mucho más difícil crear un sitio web o blog que se adapte a estos cambios, entonces por eso iniciaremos con CSS.

Iniciando CSS

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Estilos definidos para este margen de tamaño */
}

El código de arriba ejemplifica muy bien lo que queremos lograr. @media es una regla que permite especificar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos informar sobre los tipos de medio sobre los que queremos definir estilos CSS, los más comunes son para imprimir y tamaño de la pantalla de la computadora.

En las imágenes de arriba vemos las dimensiones del tamaño del navegador de un iPhone, lo que vemos es que para un estado de retrato el área visible es de 320x356 pixeles, y para modo apaisado son 480 x208 pixeles, por tal motivo en el código se emplea

@media only screen

and (min-device-width : 320px)


and (max-device-width : 480px)




para especificar que el ancho mínimo sea el de modo retrato, y el máximo sea el del apaisado, con esto ya tenemos todo listo, faltarían las llaves “{” “}” y dentro el código CSS.

CSS para dispositivos

Ahora que ya entendimos a qué se refiere cada parametro ya les puedo dejar los código para cada tamaño de pantalla.

<style>

/* Smartphones (retrato y apaisado) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Estilos */
}

/* Smartphones (apaisado) ----------- */
@media only screen
and (min-width : 321px) {
/* Estilos */
}

/* Smartphones (retrato) ----------- */
@media only screen
and (max-width : 320px) {
/* Estilos */
}

/* iPads (retrato y apaisado) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Estilos */
}

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

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

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

</style>

Si se fijan donde dice Estilos debemos colocar nuestras hojas de estilos para que sólo funcionen cuando se active alguno de los filtros que les pongo.