Orientación IPAD CSS

En su mayor parte, Mobile Safari en el IPAD es el mismo que en el iPhone. Una diferencia que he encontrado es que Webkit en los honores IPAD CSS declaraciones los medios de consulta basada en la orientación.

He construido una página de ejemplo que demuestra CSS orientación de IPAD.

El uso de la orientación en CSS es muy simple. El código es el siguiente:





En este ejemplo, la única diferencia entre las dos hojas de estilo es que se esconden uno de los dos títulos. El HTML de la página tiene el siguiente código:

que estás viendo en modo vertical

que estás viendo en el Paisaje


que estás viendo en modo vertical

que estás viendo en el Paisaje

El CSS para portrait.css simplemente oculta el
paisaje:

# Paisaje {display: none}
Y, por supuesto, landscape.css hace lo contrario.

Puedes ver esta consulta CSS en las versiones actuales de Safari y Firefox en su máquina de escritorio. Simplemente cambia el tamaño de la ventana del navegador hasta la altura es más alto que el ancho.

btemplates