Lär dig att utveckla för iPhone

Idag ska jag visa dig hur man bygger en alternativ sida och stilark för iPhone och iTouch. Vi kommer att täcka hur du upptäcker om användaren använder en iPhone för att se din sida samt enhetens orientering - oavsett om det är landskap eller porträtt. För att uppnå detta använder vi javascript, och vissa Safari-mobilspecifika CSS-taggar.

Komma igång

Vi ska börja med 2 psd jag gjorde och få dem som arbetar på en iPhone-sida. Jag använder bilder för bakgrunden och rubriken även om du bara kan använda raka färger i stället för bilder. Den positiva sidan att inte använda bilder är att det uppenbarligen laddas snabbare men även när man byter mellan landskap och stående tar bilderna ett ögonblick att ladda, beroende på hur stor de är. Du kan hitta källan psd-filer här eller du kan skapa din egen. Något att tänka på är att vi bygger en sida speciellt för iPhone eller iTouch. Om du inte har enheten själv kan du ladda ner iPhone SDK fritt från Apple och det innehåller en iPhone-simulator. om du vill upptäcka iPhone på din vanliga webbläsarsida och antingen ladda iPhone css och html genom villkorliga uttalanden eller skicka användaren till en annan sida helt, använd följande kod:

 

Koden ovan förklaras:

  • Linje 2: Skapa en variabel som innehåller användarnas typ av webbläsare (bland annat)
  • Rad 3: Tilldela webbläsaren ett värde om iPhone-webbläsaren är närvarande.
  • Linje 4-8: Ett om-meddelande som omdirigerar användaren till en "iPhoneformad sida" om variabeln "users_browser" returnerar ett värde (vilket betyder att användaren använder en iPhone eller iTouch för att visa den aktuella sidan).

Nedan kommer koden att använda html villkorliga uttalanden för att dölja koden från en vanlig webbläsare.

     

Steg 1: HTML

Så vi vet nu hur man pekar användaren på din iPhone-sida om de är på en iPhone eller iTouch-enhet. Nu börjar vi jobba på iPhone HTML-sidan. Koden nedan har några viktiga skillnader från ett vanligt XHTML övergångsdokument.

     Min iPhone sida  

Koden ovan förklaras linje för rad:

  • Linje 1 - 5: Detta är standard 1.0 XHTML Transitional Doctype. Inget speciellt än.
  • Rad 6: Denna rad är iPhone och iTouch specifik. Den ställer in initialvärden för visningsporten i enhetens webbläsare. Bredd = Enhetsbredd anger sidans bredd för att vara samma bredd på enheten. startskala och maximal skala ställer in startpunkten för sidans zoo, maxskalan är hur mycket sidröret skalas upp.
  • Linje 9: Detta länkelement pekar på webbsidans ikon. Detta används när en användare sparar sidan till sin "Hemskärm".
  • Linje 10: Ett länkelement pekar på iPhone-stilarket. Detta element har id orient_css tilldelat det. Det här är så att vi kan peka på det med javascript för att ändra den css-fil den pekar på när det gäller att justera layouten för enhetens orientering.

Steg 2: Att lägga ut Divs

Vi fortsätter nu med resten av html innan vi lägger till några javascriptfunktioner för orienteringsdetektering. Börja med att avsluta huvudet och börja sedan kroppen. I kroppselementet lägger vi onorientationchange = orient () ;. Så jag ljugit bara, det är lite av javascript, men det behövs för att kalla vår "orienteringsfunktion" (vi går över det här lite) när någonsin detekterar enheten en annan orientering.

   

Detta är huvudinnehållet på sidan.

Med hjälp av css och javascript kan vi manipulera någon av dessa divs med en alternativ css-fil. Css-filerna i detta projekt är för landskaps- och porträttvisningar.

Några mer fyllmedel text här för att visa sidan.

Steg 3: Orienteringen Javascript

I sidans början kommer du att vilja placera koden nedan

 

switch (window.orientation) fungerar av metoden onorientationchange () i kroppselementet. Detta kommer att kontrollera om den aktuella rotationen är lika med "fallvärdet", om det returneras sant, kommer det att utföras vad som är efter kolon. Efter en orientering har matchats bryts den ut ur orienteringen () ;. window.onload () kör orienteringsfunktionen när sidan först fyller in.

Efter varje fall (värde): vi har javascript som pekar på länkelementen ID som vår css-fil är kopplad till. Beroende på fallvärdet, 0, 90 eller -90 (det finns också 180 men det stöds inte på iPhone just nu). Stående eller liggande css-filen är kopplad till href-taggen i länkelementet. 0 är upprätt (stående), 90 är landskap moturs. -90 är landskapet vänster medurs och 180 men inte stöds ännu skulle representera enheten upp och ner.

Steg 4: Implementera CSS

Även med all denna kod, gör sidan inte mycket. Det beror på att vi måste lägga till bakgrundsbilder och stila allt. Vi kommer att skapa 2 css-filer, en som heter iphone_portrait.css och en annan kallad iphone_landscape.css. Vi placerar portfölj css-filen i länkelementet som standard css-fil som ska användas.

 kropp bakgrundsfärg: # 333; margin-top: -0px; margin-vänster: -0px;  #wrap overflow: auto; bredd: 320 x; höjd: 480 x;  #header background: url (... /images/header.jpg); background-repeat: no-repeat; höjd: 149px;  #content background: url (... /images/middle.jpg); bakgrund-repeat: upprepa-y; margin-top: -5px;  p marginal: 5px; padding-vänster: 25px; bredd: 270px; font-size: 10px; font-family: arial, "san serif";  #bottom background: url (... /images/bottom_corners.jpg); background-repeat: no-repeat; höjd: 31px; margin-top: -5px; 

Ovanstående kod är för iphone_portrait.css filen och är ganska rakt framåt. Några saker att notera är:

  • i wrap stil beskrivning översvämning: auto gör att flytande föremål hålls inne i wrap div för att hålla sidan snygg och städad.
  • Dimensionerna för sidan är 320px breda 480px långa. var noga med att ange detta i wrap div.

Nedan är koden som ska placeras inuti filen iphone_landscape.css. De enda skillnaderna mellan porträtt och liggande css-filer är bakgrundsbilden, omslagsdimensionerna är reverserade och marginalerna justeras därefter.

 kropp bakgrundsfärg: # 333; margin-top: -0px; margin-vänster: -0px;  #wrap overflow: auto; bredd: 480 x; höjd: 320 x;  #header background: url (... /images/l_header.jpg); background-repeat: no-repeat; höjd: 120 bildpunkter;  #content background: url (... /images/l_middle.jpg); bakgrund-repeat: upprepa-y; margin-top: -5px;  p marginal: 5px; padding-vänster: 25px; bredd: 370px; font-size: 10px; font-family: arial, "san serif";  #bottom background: url (... /images/l_bottom_corners.jpg); background-repeat: no-repeat; höjd: 37px; margin-top: -5px; 

Om du använder mina skivade bakgrundsbilder ska din sida nu se ut som bilden nedan när du är i stående läge.

Eller, i liggande läge?

Var ska du gå här?

Så nu när du har en sida formaterad och stylad för iPhone och iTouch, vad mer kan du göra? Tja, om din sida är avsedd att vara mer av en webapp kan du kolla in IUI av Joe Hewitt som är en ram som gör att dina sidor ser ut som inbyggda iPhone- eller iTouch-appar. Tänk också på att du kan ställa in 3 specifika css-filer. så du kan ha en css-fil som utformar sidan om den vände medurs till landskapet och en annan fil igen för när den vände motsols för att ligga. Detta kommer att möjliggöra några intressanta resultat. Lycka till!