A vezetők megtanulják építeni honlapok iPhone

Ahogy ígértem, akkor időről időre megosztani tanulást. School Engage Interactive. szentelt mindent, ami megfelel az interneten, a következő: Hogy megtanulják, hogyan kell létrehozni egy honlapot, amely kifejezetten az iPhone.

Csakúgy, mint bármely más böngésző, a Safari szüksége van minden szabványos HTML-kód a felső és az oldal alján, és még mindig nem lenne rossz, hogy adjunk egy pár kulcsszavak, amelyek a Google képes lesz figyelemmel kíséri a webhely tartalmáról. Ezen kívül van néhány speciális meta-tagek iPhone, mellyel képes lesz kezelni a tartalomszolgáltatás. Van egy példa arra, hogy a kód a hatálya alá tartozó „fej”.

Ha megnézzük a vonalak 3,4 és 6, akkor észrevehetjük, hogy még soha nem találkoztam ilyen szöveget.

Mielőtt lejutni j # 097; vascript és CSS kell helyezni, a tartalom felett azonosítók és az alapértelmezett stílus, úgy, hogy nem lehetett látni mindent egyszerre előtt a helyszínen betölteni teljesen.

Először is, szükségünk van a héj, amely a teljes tartalmát az oldal. Ez nagyon fontos, mivel j # 097; vascript fog változni osztályok ebben shell, amely érinti az elemek számát belül.

Következő lépésként adja meg a logó. Ez, persze, nem kötelező, de itt van egy példa, hogy a tartalom mindig látható, függetlenül a tájolás, amit akar.

Paraméterek „display: none” lesz kitéve ezek a területek és a „display: block” annak érdekében, hogy elkerüljék az esetleges zavar több, mint egy háttérszín / kép és a méret. Hagyjuk az egészet, hogy a tartalom a régión belül.

Ezek a stílusok egyszerűen állítsa a szín és betűméret több elem, valamint a stílus a logó és a héj oldalt. Ön valószínűleg már észrevette, hogy én használt betűtípus Helvetica. Ez a betűtípus jelen az iPhone, és azt hiszem, ez figyelemre méltó, és ezért kérte azt. Nincs több nem Arial!

Segítségével a „overflow: auto” és „#page_wrapper” Kimutattuk, hogy sem a lebegő elem nem túlcsordulás a tartalmazó div. Ez a legjobb alternatíva a tag "
”.

CSS alábbi kódot fogja irányítani, amely blokkolja jelennek meg, és amelyek el vannak rejtve, hogy ellenőrzése alá kerül j # 097; vascript, amihez hamarosan kap.

Először is, meg kell alapértelmezett elrejteni semmit ott. Ez biztosítja azt, hogy nem jelenik meg a különböző tartalmak, ami aztán hirtelen eltűnik, ha az oldal betöltődik.

Továbbá, a szélessége kerül meghatározásra blokkokat. Ha a fejlődő egy weboldal, amely megnyúlik, hogy illeszkedjen a képernyőn, akkor valószínűleg szeretné megadni a magasságot és így tovább.

Végül az okos bit (valójában nem olyan okos). Egyszerűen mutatja a blokk, ha a „#page_wrapper” a helyes osztály. Ezek az osztályok jelzi j # 097; vascript. Lehetséges lenne, hogy mindezt a j # 097; vascript, ha én Engage honlap néhány trükköt a megfelelő helyeken, ahol osztályok kellett kötni konkrét stílus.

- Ünnepélyes vége: meghatározása orientáció (és további hasznos trükk)

Ez nagyon okos kicsit! De el kell ismernem, nem az egészet írta nekem, egyes részei vettünk a különböző példákat a hálózatban. Hoztam egy kis listát a felhasznált erőforrások végén a cikk. A koncepció azonban teljesen tulajdonában Engage Interactive.

Az első sor inicializálja orientációjának megváltozása. Enélkül az orientáció fogja meghatározni az induláskor, kivéve, hogy ha ez az első alkalom, meg fog változni.

Ez egy olyan lehetőség, mely módosítást az oldalon, amely lehetővé teszi, hogy megjelenítéséhez különböző tartalmat. Nézzük lépésről lépésre:

Ügyesen, nem?

Itt is használták egy másik kis trükk, ami a teljes program használ egy nagy és szép iPhone képernyőjén.

j # 097; vascript vár egy teljes letöltése oldalt, majd visz bennünket, hogy a megnevezett elem. Ebben az esetben a „page_wrapper”. Ez azonnal elrejti a címsorba, hanem megcsináltuk kézzel. Ez nagyon hasznos, ha egy oldal, amely pontosan kinyújtva az iPhone képernyőjén.

Kattintson a jobb gombbal, és mentse a fájlt:

* Egyszer az archívumban: source.zip - source.zip [6,11 Kb] (száma: 113)

Tehát mindez a technikai oldala az alkotás folyamatát a helyszínen, bebörtönözték iPhone, stb, akkor továbbra is létrehozhat saját. Azt is összegyűjtött néhány hasznos linkek a forrás, amit hasznosnak találhat.

- Amik érdemes megjegyezni

Mielőtt elmész a saját honlapján az iPhone, akkor érdemes lenne emlékezni egy pár dolgot:

Apple szíves biztosítani minden szükséges információt az emberek, hogy ők is biztonságosan használható, amikor kezdődik a szállítási iPhone webes alkalmazások. Már kiválasztotta a legfontosabb oldalakat, rejtett többrétegű hasznos információkat és tippeket (de nekik meg kell regisztrálni):

Legalábbis ezek a hivatkozások rendelkezésre álltak az időben az írás, de én is észrevettem, hogy az Apple úgy tűnik, hogy frissíteni kell az adatokat időközönként egy héten. Tehát, ha talál valami érdekes ma, jövő héten talán titokzatos eltűnnek. Nekik van egy nagy kereső az oldalon, hogy megtalálja, amire szüksége van könnyen.

- És igen, hogyan tudnám elfelejteni!

Ez a kis script fogja meghatározni a iPhone vagy iPod Touch és mozgassa meg, hogy a szükséges oldalt.