Leer hoe je kunt ontwikkelen voor de iPhone

Vandaag laat ik je zien hoe je een alternatieve pagina en stylesheet voor de iPhone en iTouch kunt maken. We bespreken hoe u kunt detecteren of de gebruiker een iPhone gebruikt om uw pagina te bekijken, evenals de richting van het apparaat - of het nu landschap of portret is. Om dit te bereiken zullen we Javascript, en een aantal Safari Mobile-specifieke CSS-tags gebruiken.

Ermee beginnen

We beginnen met 2 psd's die ik heb gemaakt en krijgen degenen die op een iPhone-pagina werken. Ik gebruik afbeeldingen voor de achtergrond en koptekst, hoewel je alleen rechte kleuren kunt gebruiken in plaats van afbeeldingen. De positieve kant van het niet gebruiken van afbeeldingen is dat het duidelijk sneller laadt, maar ook bij het schakelen tussen landschap en portret duurt het laden van de beelden even, afhankelijk van hoe groot ze zijn. Je kunt de bron-psd-bestanden hier vinden of je kunt er zelf een maken. Iets om in gedachten te houden is dat we een pagina bouwen die specifiek voor de iPhone of iTouch is bedoeld. Als u het apparaat niet zelf hebt, kunt u de iPhone SDK gratis downloaden van Apple en het bevat een iPhone-simulator. Als je de iPhone op je standaard browserpagina wilt detecteren en de iPhone css en html via voorwaardelijke instructies wilt laden of de gebruiker volledig naar een andere pagina wilt sturen, gebruik dan de volgende code:

De code hierboven uitgelegd:

• Regel 2: maak een variabele die het browsertype van de gebruiker bevat (onder andere)
• Regel 3: wijs het browsertype een waarde toe als de iPhone-browser aanwezig is.
• Regel 4 - 8: Een if-instructie die de gebruiker doorverwijst naar een "door de iPhone geformuleerde pagina" als de variabele "users_browser" een waarde retourneert (wat betekent dat de gebruiker een iPhone of iTouch gebruikt om de huidige pagina te bekijken).

Onder de code worden html-voorwaardelijke instructies gebruikt om de code uit een normale browser te verbergen.

Stap 1: de HTML

Dus we weten nu hoe de gebruiker naar uw iPhone-pagina moet worden geleid als deze zich op een iPhone- of iTouch-apparaat bevindt. Nu gaan we aan de slag met de iPhone HTML-pagina; de onderstaande code heeft enkele belangrijke verschillen met een regulier XHTML-overgangsdocument.

De bovenstaande code wordt regel voor regel uitgelegd:

• Regel 1 - 5: dit is standaard 1.0 XHTML overgangstype. Niets bijzonders.
• Regel 6: deze lijn is specifiek voor iPhone en iTouch. Het stelt beginwaarden in voor het kijkvenster in de browser van het apparaat. width = device-width geeft aan dat de breedte van de pagina dezelfde breedte van het apparaat is. initiële schaal en maximale schaal instellen het startpunt voor de zoom van de pagina, maximum-schaal is hoeveel de pagina kan worden opgeschaald.
• Regel 9: dit koppelingselement wijst naar het webpagina-pictogram. dit wordt gebruikt wanneer een gebruiker de pagina op zijn "startscherm" opslaat.
• Regel 10: een koppelingselement verwijst naar het iPhone-stylesheet. Aan dit element is de id orient_css toegewezen. Dit is zodat we het met javascript kunnen aanwijzen om het CSS-bestand waarnaar het verwijst te wijzigen als het gaat om het aanpassen van de layout voor de oriëntatie van het apparaat.

Stap 2: De divs neerleggen

We gaan nu verder met de rest van de HTML voordat we javascript-functies toevoegen voor oriëntatiedetectie. Begin met het beëindigen van het hoofd en start vervolgens het lichaam. In het body-element voegen we onorientationchange = orient (); toe. Dus ik heb net gelogen, dat is een beetje javascript, maar dit is nodig om onze "orient" -functie te noemen (we zullen dit in een beetje doornemen) wanneer het apparaat een andere oriëntatie detecteert.

   
 
 
 
 
Dit is het hoofdinhoudsgebied van de pagina. 
 
Met css en javascript kunnen we elk van deze divs manipuleren met behulp van een alternatief CSS-bestand. De CSS-bestanden in dit project zijn voor landschaps- en portretweergaven.
 
Hier nog wat meer filler-tekst om de pagina te demonstreren.
 
 
 
 
  

Stap 3: De Orientation Javascript

In de kop van de pagina wilt u de onderstaande code plaatsen

switch (window.orientation) werkt af van de methode onorientationchange () in het body-element. Dit zal controleren om te zien of de huidige rotatie gelijk is aan de "case value", als het true retourneert zal het uitvoeren wat er na de dubbele punt is. Nadat een oriëntatie is gematcht breekt het uit orient () ;. window.onload () voert de oriëntatiefunctie uit wanneer de pagina voor het eerst klaar is met laden.

Na elk geval (waarde): we hebben javascript wijzend naar de link-elementen-id waaraan ons CSS-bestand is gekoppeld. Afhankelijk van de casuswaarde, 0, 90 of -90 (er is ook 180, maar dit wordt momenteel niet ondersteund op de iPhone), is het css-bestand portrait of landscape gekoppeld aan de href-tag in het link-element. 0 staat rechtop (portret), 90 is liggend tegen de klok in. -90 is landschap met de klok mee gedraaid en 180 hoewel dit nog niet wordt ondersteund, geeft aan dat het apparaat ondersteboven staat.

Stap 4: De CSS implementeren

Zelfs met al deze code doet de pagina niet veel. Dat komt omdat we achtergrondafbeeldingen moeten toevoegen en alles moeten stylen. We zullen 2 css-bestanden maken, een genaamd iphone_portrait.css en een andere genaamd iphone_landscape.css. We plaatsen het css-bestand portrait in het link-element als het standaard css-bestand dat moet worden gebruikt.

 body achtergrondkleur: # 333; margin-top: -0px; margin-left: -0px;  # omloop overflow: auto; width: 320px; Hoogte: 480px;  #header background: url (... /images/header.jpg); background-repeat: no-repeat; Hoogte: 149px;  #content background: url (... /images/middle.jpg); background-repeat: repeat-y; margin-top: -5px;  p margin: 5px; padding-left: 25px; width: 270px; font-size: 10px; font-family: arial, "san serif";  #bottom background: url (... /images/bottom_corners.jpg); background-repeat: no-repeat; hoogte: 31px; margin-top: -5px; 

De bovenstaande code is voor het iphone_portrait.css-bestand en is vrij eenvoudig. Een aantal zaken om op te merken zijn:

• in de wrap style description overflow: auto zorgt ervoor dat zwevende items binnen de wrap div worden bewaard om de pagina netjes en opgeruimd te houden.
• de afmetingen voor de pagina zijn 320 px breed en 480 px hoog. zorg ervoor dit in de wrap div te vermelden.

Hieronder staat de code die in het bestand iphone_landscape.css moet worden geplaatst. de enige verschillen tussen portret- en landschapsscss-bestanden zijn de achtergrondafbeeldingen, de omslagafmetingen zijn omgekeerd en de marges zijn overeenkomstig aangepast.

 body achtergrondkleur: # 333; margin-top: -0px; margin-left: -0px;  # omloop overflow: auto; width: 480px; Hoogte: 320px;  #header background: url (... /images/l_header.jpg); background-repeat: no-repeat; Hoogte: 120px;  #content background: url (... /images/l_middle.jpg); background-repeat: repeat-y; margin-top: -5px;  p margin: 5px; padding-left: 25px; width: 370px; font-size: 10px; font-family: arial, "san serif";  #bottom background: url (... /images/l_bottom_corners.jpg); background-repeat: no-repeat; hoogte: 37px; margin-top: -5px; 

Als u mijn gesneden achtergrondafbeeldingen gebruikt, zou uw pagina er nu uit moeten zien als de afbeelding hieronder in staande modus.

Of in de liggende modus?

Waar te gaan vanaf hier?

Dus nu u een pagina hebt die is opgemaakt en gestyled voor de iPhone en iTouch, wat kunt u nog meer doen? Welnu, als uw pagina meer als een web-app bedoeld is, wilt u misschien de IUI van Joe Hewitt bekijken. Dit is een raamwerk waardoor uw pagina's eruit zien als native iPhone- of iTouch-apps. Houd er ook rekening mee dat u drie specifieke CSS-bestanden kunt instellen; dus je kunt één css-bestand hebben dat de pagina opmaakt als het met de klok mee naar liggend wordt gedraaid en een ander bestand opnieuw wanneer het tegen de klok in in liggend wordt gedraaid. Dit zal enkele interessante resultaten mogelijk maken. Succes!