Share
Hoy les mostraré cómo crear una página alternativa y una hoja de estilo para el iPhone y el iTouch. Cubriremos cómo detectar si el usuario está utilizando un iPhone para ver su página, así como la orientación del dispositivo, ya sea horizontal o vertical. Para lograr esto, utilizaremos javascript y algunas etiquetas CSS específicas para dispositivos móviles de Safari..
Vamos a comenzar con 2 psd que hice y conseguiremos que trabajen en una página de iPhone. Estoy usando imágenes para el fondo y el encabezado, aunque podría usar colores rectos en lugar de imágenes. El lado positivo de no usar imágenes es que, obviamente, se carga más rápido, pero también cuando se cambia entre horizontal y vertical, las imágenes tardan un momento en cargarse, dependiendo de su tamaño. Puede encontrar los archivos psd de origen aquí o puede crear los suyos propios. Algo a tener en cuenta es que estamos construyendo una página específicamente para el iPhone o iTouch. Si no tiene el dispositivo, puede descargar el iPhone SDK libremente desde Apple e incluye un simulador de iPhone. Si desea detectar el iPhone en la página de su navegador estándar y cargar el iPhone css y html a través de declaraciones condicionales o enviar al usuario a una página completamente diferente, use el siguiente código:
El código explicado anteriormente:
Debajo del código se usarán las declaraciones condicionales html para ocultar el código de un navegador normal.
Así que ahora sabemos cómo dirigir al usuario a la página de su iPhone si están en un dispositivo iPhone o iTouch. Ahora, comenzaremos a trabajar en la página HTML del iPhone; El siguiente código tiene algunas diferencias clave con respecto a un documento de transición XHTML normal..
Mi página de iPhone
El código arriba explicado línea por línea:
Ahora continuamos con el resto del html antes de agregar cualquier función de javascript para la detección de orientación. Comienza con terminar la cabeza y luego comienza el cuerpo. En el elemento body agregamos onorientationchange = orient () ;. Así que solo mentí, eso es un poco de javascript, pero esto es necesario para llamar a nuestra función "orientar" (revisaremos esto un poco) cuando el dispositivo detecte una orientación diferente.
Este es el área de contenido principal de la página..
Usando css y javascript podemos manipular cualquiera de estos divs usando un archivo css alternativo. Los archivos css en este proyecto son para vistas horizontales y verticales..
Un poco más de texto de relleno aquí para mostrar la página.
En el encabezado de la página querrá colocar el código que se ve a continuación.
switch (window.orientation) funciona fuera del método onorientationchange () en el elemento body. Esto verificará si la rotación actual es igual al "valor de caso", si devuelve verdadero, ejecutará lo que está después de los dos puntos. Después de que una orientación ha sido igualada, se sale de orient () ;. window.onload () ejecuta la función orientar cuando la página termina de cargarse.
Después de cada caso (valor): tenemos javascript que apunta a la identificación de los elementos de enlace a la que se adjunta nuestro archivo css. Dependiendo del valor del caso, 0, 90 o -90 (también hay 180, pero no es compatible con el iPhone en este momento) el archivo css vertical o landscape se adjunta a la etiqueta href en el elemento de enlace. 0 está en posición vertical (retrato), 90 es horizontal en sentido contrario a las agujas del reloj. -90 es horizontal girado en el sentido de las agujas del reloj y 180, aunque no es compatible, representaría que el dispositivo está boca abajo.
Incluso con todo este código, la página no hace mucho. Eso es porque tenemos que agregar imágenes de fondo y darle estilo a todo. Crearemos 2 archivos css, uno llamado iphone_portrait.css y otro llamado iphone_landscape.css. Colocaremos el archivo css vertical en el elemento de enlace como el archivo css predeterminado para usar.
cuerpo fondo-color: # 333; margen superior: -0px; margen izquierdo: -0px; #wrap desbordamiento: auto; ancho: 320px; altura: 480px; #header background: url (… /images/header.jpg); repetición de fondo: no repetición; altura: 149px; #content background: url (… /images/middle.jpg); Repetición de fondo: repetir y; margen superior: -5px; p margen: 5px; relleno-izquierda: 25px; ancho: 270px; tamaño de fuente: 10px; Familia tipográfica: arial, "san serif"; #bottom background: url (… /images/bottom_corners.jpg); repetición de fondo: no repetición; altura: 31px; margen superior: -5px;
El código anterior es para el archivo iphone_portrait.css y es bastante sencillo. Algunas cosas a tener en cuenta son:
A continuación se muestra el código que se colocará dentro del archivo iphone_landscape.css. Las únicas diferencias entre los archivos css verticales y horizontales son las imágenes de fondo, las dimensiones de ajuste se invierten y los márgenes se ajustan en consecuencia.
cuerpo fondo-color: # 333; margen superior: -0px; margen izquierdo: -0px; #wrap desbordamiento: auto; ancho: 480px; altura: 320px; #header background: url (… /images/l_header.jpg); repetición de fondo: no repetición; altura: 120px; #content background: url (… /images/l_middle.jpg); Repetición de fondo: repetir y; margen superior: -5px; p margen: 5px; relleno-izquierda: 25px; ancho: 370px; tamaño de fuente: 10px; Familia tipográfica: arial, "san serif"; #bottom background: url (… /images/l_bottom_corners.jpg); repetición de fondo: no repetición; altura: 37px; margen superior: -5px;
Si está usando mis imágenes de fondo cortadas, su página debería verse como la imagen de abajo cuando está en modo retrato.
O bien, en modo paisaje?
Así que ahora que tiene una página con formato y estilo para iPhone e iTouch, ¿qué más puede hacer? Bueno, si su página está destinada a ser más una aplicación web, es posible que desee revisar el IUI de Joe Hewitt, que es un marco que hace que sus páginas se vean como aplicaciones nativas de iPhone o iTouch. También tenga en cuenta que puede establecer 3 archivos css específicos; para que pueda tener un archivo css que estilice la página si se gira en el sentido de las agujas del reloj a horizontal y nuevamente un archivo diferente para cuando se gire en sentido contrario a las agujas del reloj en horizontal. Esto permitirá algunos resultados interesantes. Buena suerte!
Accentsconagua