Share
Oggi vi mostrerò come costruire una pagina alternativa e un foglio di stile per iPhone e iTouch. Tratteremo come rilevare se l'utente sta utilizzando un iPhone per visualizzare la pagina e l'orientamento del dispositivo, sia esso orizzontale o verticale. Per fare ciò utilizzeremo javascript e alcuni tag CSS specifici per cellulari di Safari.
Cominceremo con 2 psd creati e far lavorare quelli in una pagina di iPhone. Sto usando le immagini per lo sfondo e l'intestazione anche se potresti usare solo colori semplici anziché immagini. Il lato positivo di non usare le immagini è che ovviamente carica più velocemente, ma anche quando si passa da un paesaggio ad un ritratto le immagini richiedono un momento per caricarle, a seconda di quanto sono grandi. Puoi trovare i file psd di origine qui o puoi crearne uno tuo. Qualcosa da tenere a mente è che stiamo costruendo una pagina specifica per iPhone o iTouch. Se non hai il dispositivo da solo, puoi scaricare l'iPhone SDK gratuitamente da Apple e include un simulatore iPhone. se si desidera rilevare l'iPhone sulla pagina del browser standard e caricare l'iPhone css e html tramite istruzioni condizionali o inviare l'utente a una pagina completamente diversa, utilizzare il seguente codice:
Il codice sopra spiegato:
Sotto il codice verranno utilizzate le istruzioni condizionali html per nascondere il codice da un normale browser.
Quindi ora sappiamo come indirizzare l'utente sulla tua pagina iPhone se si trova su un dispositivo iPhone o iTouch. Ora inizieremo a lavorare sulla pagina HTML di iPhone; il codice seguente presenta alcune differenze chiave rispetto a un normale documento transitorio XHTML.
La mia pagina iPhone
Il codice sopra spiegato riga per riga:
Ora continuiamo con il resto dell'html prima di aggiungere qualsiasi funzione javascript per il rilevamento dell'orientamento. Inizia con la fine della testa e poi avvia il corpo. Nell'elemento body si aggiunge onorientationchange = orient () ;. Quindi ho mentito, è un po 'di javascript, ma è necessario per chiamare la funzione "orient" (ne parleremo tra un po') quando il dispositivo rileva un diverso orientamento.
Questa è l'area di contenuto principale della pagina.
Usando css e javascript possiamo manipolare una qualsiasi di queste div usando un file css alternativo. I file CSS in questo progetto sono per le viste orizzontale e verticale.
Qualche altro testo di riempimento qui per dimostrare la pagina.
Nella parte superiore della pagina dovrai inserire il codice visualizzato di seguito
switch (window.orientation) funziona con il metodo onorientationchange () nell'elemento body. Questo verificherà se la rotazione corrente è uguale al "valore del caso", se restituisce true eseguirà ciò che è dopo i due punti. Dopo che un orientamento è stato abbinato, esce da orient () ;. window.onload () esegue la funzione di orientamento al termine del caricamento della pagina.
Dopo ogni caso (valore): abbiamo javascript che punta all'id di elementi di collegamento a cui è collegato il nostro file css. A seconda del valore del caso, 0, 90 o -90 (c'è anche 180 ma non è supportato su iPhone in questo momento) il file css verticale o orizzontale è collegato al tag href nell'elemento link. 0 è verticale (verticale), 90 è orizzontale in senso antiorario. -90 è orizzontale ruotato in senso orario e 180 anche se non ancora supportato rappresenterebbe il dispositivo capovolto.
Anche con tutto questo codice, la pagina non fa molto. Questo perché abbiamo bisogno di aggiungere immagini di sfondo e stile tutto. Creeremo 2 file CSS, uno chiamato iphone_portrait.css e un altro chiamato iphone_landscape.css. Inseriremo il file css portrait nell'elemento link come file css predefinito da utilizzare.
body background-color: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; larghezza: 320px; altezza: 480px; #header background: url (... /images/header.jpg); background-repeat: no-repeat; altezza: 149px; #content background: url (... /images/middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margin: 5px; padding-left: 25px; larghezza: 270px; font-size: 10px; font-family: arial, "san serif"; #bottom background: url (... /images/bottom_corners.jpg); background-repeat: no-repeat; altezza: 31px; margin-top: -5px;
Il codice sopra riportato è per il file iphone_portrait.css ed è piuttosto diretto. Alcune cose da notare sono:
Di seguito è riportato il codice da inserire nel file iphone_landscape.css. le uniche differenze tra i file css portrait e landscape sono le immagini di sfondo, le dimensioni del wrap sono invertite e i margini vengono adeguati di conseguenza.
body background-color: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; larghezza: 480px; altezza: 320px; #header background: url (... /images/l_header.jpg); background-repeat: no-repeat; altezza: 120px; #content background: url (... /images/l_middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margin: 5px; padding-left: 25px; larghezza: 370px; font-size: 10px; font-family: arial, "san serif"; #bottom background: url (... /images/l_bottom_corners.jpg); background-repeat: no-repeat; altezza: 37px; margin-top: -5px;
Se stai usando le mie immagini di sfondo a fette, la tua pagina dovrebbe apparire come l'immagine qui sotto quando sei in modalità verticale.
Oppure, in modalità orizzontale?
Quindi ora che hai una pagina formattata e disegnata per iPhone e iTouch, che altro puoi fare? Bene, se la tua pagina è pensata per essere più di un'app web potresti voler controllare lo IUI di Joe Hewitt, che è un framework che rende le tue pagine come app native per iPhone o iTouch. Ricorda inoltre che puoi impostare 3 file css specifici; in modo da poter avere un file css che disegna la pagina se è girata in senso orario in orizzontale e di nuovo in un altro file per quando è girata in senso antiorario in orizzontale. Ciò consentirà alcuni risultati interessanti. In bocca al lupo!
Accentsconagua