I förra delen av vår web app-guide tog vi upp några exempel på hur man kan anpassa en hemsida så att den beter sig likt en iPhone-applikation.
Här är ett par exempel till:
Anpassa ditt innehåll till skärmens lutning
iPhone och iPod Touch kan visa en hemsidas innehåll i två olika format:
* Stående. Här är innehållsytan 320 pixlar bred och 480 pixlar hög.
* Liggande. Innehållsytan är i detta fall 480 pixlar bred och 320 pixlar hög.
En del av innehållsytan tas alltid upp av statusfältet, som exempelvis visar batteritiden. Om du öppnar hemsidan i webbläsaren Safari kommer en del av skärmen också att tas upp av webbläsarens sökfält och knappfält. Det går att döja sökfältet med hjälp av en skrollfunktion i Javascript, vilket vi berättade om i förra delen av vår guide. Med hjälp av ett web clip kan hemsidan visas utan Safaris sökfält och knappfält. Även detta berättade vi om i förra delen av guiden. Mer om web clips nedan.
Innehållet visas i liggande format när användaren vrider telefonen tillräckligt långt åt höger eller vänster. Innehållet på din sida roteras alltså automatiskt. Däremot kommer inte innehållet att skalas om automatiskt till den nya skärmorienteringen. Ditt innehåll har samma dimensioner oavsett hur skärmen har vridits - om du inte väljer att göra något åt det. Lyckligtvis går det att göra något åt det.
Med hjälp av Javascript och CSS kan du koda din hemsida så att innehållets storlek anpassas till skärmorienteringen. TIll exempel kan en lista ha en viss bredd när den visas i stående format och en annan bredd när den visas i liggande format.
Här finns ett kodexempel på hur man känner av skärmorienteringen.
Öppna web app från Home-skärmen
På iPhones Home-skärm (telefonens "skrivbord") visas de installerade programmen som ikoner. När användaren klickar på en ikon öppnas ett program. Det går att öppna web apps på samma sätt. När användaren besöker en hemsida kan han/hon välja att ladda hem en ikon (ett web clip) till sin Home-skärm. När användaren sedan klickar på denna ikon så öppnas hemsidan.
Ett web clip sparas ner så här i webbläsaren Safari:
* Gå in på en hemsida och tryck på "+" -knappen.
* Välj alternativet "Add to Home Screen".
* Välj ett namn på ikonen och tryck på "Add" .
Web clip-ikonen kan bestå av en specifik bild. Om du väljer att skapa en sådan så är det viktigt att tänka på web clip-ikonens storlek. Om ikonen är för liten i förhållande till standardstorleken på Home-skärmen så kommer ikonen att förstoras automatiskt. Det kanske inte ser så snyggt ut. Ett tips är att försöka skapa en bild som är 57 pixlar bred och 57 pixlar hög.
För att använda den skapade bilden kan man lägga in följande kodrad mellan <head> - taggarna i html-dokumentet:
<link rel="apple-touch-icon" href="bildnamn.png" />
Om en specifik bild saknas så kommer den nedladdade ikonen att bestå av en miniatyrbild av hemsidan.
Det är användaren som bestämmer vad som ska stå under web clip-ikonen när den har sparats ner till Home-skärmen. Om användaren inte väljer ett eget namn så kommer titeln på html-sidan att stå under web clip-ikonen (alltså den text som finns mellan taggarna <title> och </title> i din html-kod). Om titeln på din sida är för lång så kommer den inte att synas i sin helhet på Home-skärmen.