Share
I dag skal jeg vise deg hvordan du bygger en alternativ side og stilark for iPhone og iTouch. Vi vil dekke hvordan du oppdager om brukeren bruker en iPhone til å vise siden din, samt retningen til enheten - enten det er landskap eller portrett. For å oppnå dette vil vi bruke javascript, og noen Safari-mobilspesifikke CSS-koder.
Vi skal begynne med 2 psd jeg laget og få de som jobber på en iPhone-side. Jeg bruker bilder til bakgrunnen og toppteksten selv om du bare kunne bruke rettferdige farger i stedet for bilder. Plussiden til å ikke bruke bilder er at det åpenbart laster raskere, men også når du bytter mellom landskap og portrett, tar bildene et øyeblikk å laste, avhengig av hvor stor de er. Du kan finne kilden psd-filer her, eller du kan lage din egen. Noe å huske på er at vi bygger en side spesielt for iPhone eller iTouch. Hvis du ikke har enheten selv, kan du laste ned iPhone SDK fritt fra Apple, og den inneholder en iPhone-simulator. hvis du vil oppdage iPhone på din standard nettleserside og enten laste inn iPhone css og html gjennom betingede utsagn eller send brukeren til en annen side helt, bruk følgende kode:
Koden ovenfor forklart:
Under koden vil du bruke HTML-betingede setninger for å skjule koden fra en vanlig nettleser.
Så vi vet nå hvordan du skal peke brukeren til din iPhone-side hvis de er på en iPhone eller iTouch-enhet. Nå begynner vi å jobbe på iPhone HTML-siden; Koden nedenfor har noen viktige forskjeller fra et vanlig XHTML overgangsdokument.
Min iPhone Side
Koden ovenfor forklart linje for linje:
Vi fortsetter nå med resten av html før vi legger til noen javascript-funksjoner for orienteringsdeteksjon. Begynn med å avslutte hodet og start deretter kroppen. I kroppselementet legger vi på onorientationchange = orient () ;. Så jeg løy akkurat, det er litt av javascript, men dette er nødvendig for å ringe vår "orient" -funksjon (vi går over dette litt) når noen gang det oppdager en annen retning.
Dette er hovedinnholdsområdet på siden.
Ved hjelp av css og javascript kan vi manipulere noen av disse divsene ved hjelp av en alternativ css-fil. CSS-filene i dette prosjektet er for landskaps- og portrettvisninger.
Noen flere filler tekst her for å demonstrere siden.
I hodet på siden vil du legge koden nedenfor
bytte (window.orientation) virker av metoden onorientationchange () i kroppselementet. Dette vil sjekke for å se om den nåværende rotasjonen er lik «saksverdi», hvis den returnerer sant, vil den utføre hva som er etter kolon. Etter at en orientering er blitt matchet, bryter den ut av orient () ;. window.onload () kjører orienteringsfunksjonen når siden først fullføres.
Etter hvert tilfelle (verdi): vi har javascript som peker på lenkeelementene ID som vår css-fil er knyttet til. Avhengig av saksverdi, 0, 90 eller -90 (det er også 180, men det støttes ikke på iPhone på dette tidspunktet). Stående eller liggende css-filen er knyttet til href-taggen i koblingselementet. 0 er oppreist (portrett), 90 er landskap mot klokken. -90 er landskapet slått med klokken og 180, men ikke støttet ennå, vil representere enheten på opp ned.
Selv med all denne koden, gjør siden ikke mye. Det er fordi vi må legge til bakgrunnsbilder og stil alt. Vi lager 2 css filer, en som heter iphone_portrait.css og en annen som heter iphone_landscape.css. Vi legger stående css-filen inn i koblingselementet som standard css-fil som skal brukes.
kropp bakgrunnsfarge: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; bredde: 320; høyde: 480px; #header background: url (... /images/header.jpg); background-repeat: no-repeat; høyde: 149px; #content bakgrunn: url (... /images/middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margin: 5px; padding-left: 25px; bredde: 270px; font-size: 10px; font-familie: arial, "san serif"; #bottom bakgrunn: url (... /images/bottom_corners.jpg); background-repeat: no-repeat; høyde: 31px; margin-top: -5px;
Ovennevnte kode er for iphone_portrait.css filen og er ganske rett frem. Noen ting å merke seg er:
Nedenfor er koden som skal plasseres i iphone_landscape.css filen. de eneste forskjellene mellom stående og liggende css-filer er bakgrunnsbildene, viklingsdimensjonene reverseres og margenene justeres tilsvarende.
kropp bakgrunnsfarge: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; bredde: 480px; høyde: 320; #header background: url (... /images/l_header.jpg); background-repeat: no-repeat; høyde: 120 x; #content bakgrunn: url (... /images/l_middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margin: 5px; padding-left: 25px; bredde: 370px; font-size: 10px; font-familie: arial, "san serif"; #bottom bakgrunn: url (... /images/l_bottom_corners.jpg); background-repeat: no-repeat; høyde: 37px; margin-top: -5px;
Hvis du bruker mine skivede bakgrunnsbilder, skal siden din nå se ut som bildet nedenfor når du er i stående modus.
Eller, i liggende modus?
Så nå at du har en side formatert og stylet til iPhone og iTouch, hva mer kan du gjøre? Vel, hvis siden din er ment å være mer av en web-app, kan du sjekke ut IUI av Joe Hewitt som er et rammeverk som gjør at sidene dine ser ut som innfødte iPhone- eller iTouch-apper. Vær også oppmerksom på at du kan angi 3 spesifikke css-filer; slik at du kan ha en css-fil som stiler siden hvis den vender med klokken til landskapet og en annen fil igjen for når den er skrudd mot klokken for å ligge. Dette vil tillate noen interessante utfall. Lykke til!
Accentsconagua