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.
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:
Nedan kommer koden att använda html villkorliga uttalanden för att dölja koden från en vanlig webbläsare.
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:
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.
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.
Ä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:
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?
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!