Share
Astăzi vă voi arăta cum să construiți o pagină alternativă și o foaie de stil pentru iPhone și iTouch. Vom descrie modul în care puteți detecta dacă utilizatorul utilizează un iPhone pentru a vizualiza pagina dvs., precum și orientarea dispozitivului - fie peisaj, fie portret. Pentru a realiza acest lucru, vom folosi javascript și unele etichete CSS specifice pentru dispozitivele mobile Safari.
Vom începe cu 2 PSD-uri pe care le-am făcut și le voi face pe cei care lucrează pe o pagină iPhone. Folosesc imagini pentru fundal și antet, deși ai putea folosi doar culori drepte în loc de imagini. Partea suplimentară pentru a nu utiliza imaginile este că în mod evident se încarcă mai repede, dar și atunci când comutați între peisaj și portret, imaginile necesită un moment de încărcare, în funcție de cât de mari sunt acestea. Puteți găsi aici fișierele PSD sursă sau puteți crea propriile fișiere. Ceva de reținut este că construim o pagină specială pentru iPhone sau iTouch. Dacă nu aveți dispozitivul singur, puteți descărca gratuit SDK-ul iPhone de la Apple și include un simulator de iPhone. dacă doriți să detectați iPhone-ul pe pagina dvs. de browser standard și fie să încărcați iPhone-ul css și html prin declarații condiționale sau să trimiteți utilizatorul într-o altă pagină în întregime, utilizați următorul cod:
Codul de mai sus a explicat:
Sub codul de mai jos se vor folosi instrucțiuni condiționale html pentru a ascunde codul dintr-un browser obișnuit.
Așadar, acum știm cum să direcționăm utilizatorul către pagina dvs. iPhone dacă se află pe un dispozitiv iPhone sau iTouch. Acum, vom începe să lucrăm la pagina HTML iPhone; codul de mai jos are unele diferențe cheie față de un document de tranziție XHTML obișnuit.
Pagina mea iPhone
Codul de mai sus explicat pe rând:
Acum continuăm cu restul html înainte de a adăuga orice funcții javascript pentru detectarea orientării. Începeți cu încheierea capului și apoi porniți corpul. În elementul corpului adăugăm onorientationchange = orient () ;. Așa că m-am mințit, este un pic de javascript, dar este necesar să ne numim funcția "orient" (vom trece peste acest lucru într-un anumit moment) când dispozitivul detectează o orientare diferită.
Aceasta este zona principală de conținut a paginii.
Folosind css și javascript putem manipula oricare dintre aceste divs folosind un alt fișier css. Fișierele CSS din acest proiect sunt pentru vizualizări peisaj și portret.
Unele text de umplutură aici pentru a demonstra pagina.
În capul paginii, veți dori să plasați codul de mai jos
switch (window.orientation) funcționează în afara metodei onorientationchange () în elementul corpului. Aceasta va verifica dacă rotația curentă este egală cu "valoarea cazului", dacă se întoarce adevărat, va executa ceea ce este după colon. După ce o orientare a fost potrivită se rupe din orient () ;. window.onload () rulează funcția orientare când prima pagină termină încărcarea.
După fiecare caz (valoare): avem javascript indicând id-ul elementelor de legătură pe care fișierul nostru css este atașat. În funcție de valoarea cazului, 0, 90 sau -90 (există, de asemenea, 180, dar nu este acceptat pe iPhone în acest moment), fișierul portret sau peisaj css este atașat la tag-ul href din elementul de legătură. 0 este în poziție verticală (portret), 90 este în sens invers acelor de ceasornic. -90 este peisajul rotit în sensul acelor de ceasornic și 180 deși nu este suportat încă ar reprezenta dispozitivul fiind invers.
Chiar și cu tot acest cod, pagina nu face prea mult. Acest lucru se datorează faptului că trebuie să adăugăm imagini de fundal și să stilizăm totul. Vom crea 2 fișiere css, unul numit iphone_portrait.css și altul numit iphone_landscape.css. Vom plasa fișierul portret css în elementul de legătură ca fișier css implicit de folosit.
corp fundal-culoare: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; lățime: 320px; Înălțime: 480 x; #header fundal: url (... /images/header.jpg); background-repeat: no-repetare; height: 149px; #content background: url (... /images/middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margine: 5px; padding-left: 25px; lățime: 270px; font-size: 10px; font-family: arial, "san serif"; #bottom fundal: url (... /images/bottom_corners.jpg); background-repeat: no-repetare; înălțime: 31px; margin-top: -5px;
Codul de mai sus este pentru fișierul iphone_portrait.css și este destul de drept înainte. Unele lucruri de reținut sunt:
Mai jos este codul care trebuie plasat în interiorul fișierului iphone_landscape.css. singurele diferențe dintre fișierele css portret și peisaj sunt imaginile de fundal, dimensiunile de înfășurare sunt inversate și marginile sunt ajustate corespunzător.
corp fundal-culoare: # 333; margin-top: -0px; margin-left: -0px; #wrap overflow: auto; lățime: 480 x; height: 320px; #header fundal: url (... /images/l_header.jpg); background-repeat: no-repetare; height: 120px; #content background: url (... /images/l_middle.jpg); background-repeat: repeat-y; margin-top: -5px; p margine: 5px; padding-left: 25px; lățime: 370px; font-size: 10px; font-family: arial, "san serif"; #bottom fundal: url (... /images/l_bottom_corners.jpg); background-repeat: no-repetare; înălțime: 37px; margin-top: -5px;
Dacă utilizați imaginile de fundal fasonate, pagina dvs. ar trebui să arate acum ca imaginea de mai jos, atunci când este în modul portret.
Sau, în modul peisaj?
Deci, acum că aveți o pagină formatată și decorată pentru iPhone și iTouch, ce altceva puteți să faceți? Ei bine, dacă pagina dvs. este menită să fie mai mult o aplicație web, vă recomandăm să verificați IUI de Joe Hewitt, care este un cadru care face ca paginile dvs. să pară ca aplicații iPhone sau iTouch native. De asemenea, rețineți că puteți seta 3 fișiere css specifice; astfel încât puteți avea un fișier css care stiluri pagină în cazul în care sa întors în sensul acelor de ceasornic pe peisaj și un alt fișier din nou pentru atunci când sa întors în sens contrar acelor de ceasornic. Acest lucru va permite obținerea unor rezultate interesante. Mult noroc!
Accentsconagua