Ordeal kódoló Safari alatti ios (h
Ez nem olyan érvényes, cross-browser kódot, amely megfelelően jelennek meg a régebbi asztali testvérek ad egy teljesen más képet, ha fut a mobil platformon - most a helyzet sokkal jobb, mint korábban. Mivel azonban a gyakorlat azt mutatja, van még néhány részletet kell figyelembe venni. Azoknak, akikkel találkozott a tesztelési folyamat a Safari for iOS, azt akarom mondani, hogy ma.
Általános rendelkezések
Mielőtt elkezdené, hogy megszüntesse a problémát a megjelenése a projekt az iOS-eszközökön, ez jó, hogy azonnal meghatározza -, hogy több lesz költséghatékony. Én nagyon gyakran látni olyan helyzetben, ahol a telephely zsúfolt felesleges, redundáns struktúrák javára egy tisztességes kilátás az iPhone. És ha az eredeti változata a honlapon még mindig a bűn és a flash ...
Néha sokkal jobb volt (mind gazdasági és használhatósági szempontból), hogy egy mobil változata, azok stílusok és szkriptek. Határozza meg, melyik eszköz a felhasználó eljött hozzánk egyszerű:
Csatlakozás stílusok használata nélkül JS 2 módja van:
- a @media elsősorban stílus fájl
- rámutatva a fejét az utat, hogy a stílus
Egy példa az első eljárást az alábbiakban ismertetjük a bekezdésben „Képek”, míg a második a következő:
A működési elve mindkét esetben egy - használjuk, mint egy azonosító maximális felbontása az eszköz, amelyen a projekt jelenik meg. Akkor, azon az úton, hogy rögzítse az azonos, csak nem a „csak” - egyfajta védelmet a régebbi böngészők.
Elvileg, akkor azonnal küld a felhasználó számára, hogy a mobil változata a honlapon (például iPad):
Mivel azonban a gyakorlat azt mutatja, a mobil változat nem mindig kényelmes, és ami a legfontosabb - nem mindig ismeri a felhasználó számára. Sokkal jobb, hogy a helyes választás: például az első átmenetet a honlapon oldal egy kérdés / javaslat, hogy használja a mobil változat.
Képek:
Webfejlesztők, ellenőrzi a kódot az életképességét futó iOS, miközben időnként szembe azzal a problémával, a nagy képeket, mint a háttér. Ezen túlmenően, a „nagy” úgy kell érteni, mint az oldat térfogata. Mint kiderül, van egy mesterséges korlátot Safari iOS.
Röviden, ez a helyzet:
- Ha a fedélzeti alma devaysa RAM 256 MB, akkor a maximális méret a képek, hogy biztonságosan lehessen használni - 3 megapixel (ami valójában ≤ 3 * 1024 * 1024 = 3145728 pixel).
- Eszközök RAM térfogat értéket, amely több, mint 256 MB, helyesen jeleníti meg a képet, akár 5 megapixeles.
A fő motiváció az e határozat szerint a legtöbb Apple, egy alacsony adatsebesség EDGE, 3G és Wi-Fi hálózatok, de a merev ragaszkodás a kötet a memória kifejezetten világossá teszi, hogy ez nem más, mint kísérlet arra, hogy elkerüljék a „laza”, ami elkerülhetetlenül ez akkor keletkezik, ha a dekódolás és méretezés nagy képeket.
Érdemes megjegyezni, hogy ezek a korlátozások a vonatkozó GIF képek. PNG és .TIFF formátumban. Ami a JPEG képeket, akkor tiszta lelkiismerettel, hogy képek használatával akár 32 megapixeles, de csak sabsemplinga módban. Hadd emlékeztessem önöket, hogy amikor elment egy képet az azonos Photoshop, sabsempling automatikusan a minőségi szint «alacsony» és a «közepes». Ez viszont azt jelenti, hogy gyakorlatilag ugyanazt a maximális felbontás a kódolását egy többé-kevésbé elfogadható, mint ugyanezek korlátoznák 32/16 = 2 megapixeles.
Kifejezetten pererezayem a képen az áttekintő betöltése, az egyik a fent leírt módszerekkel, például - a @media:
Monitorhoz felbontással> 1024 jelenik háttér megadott CSS előtt.
Scripts futni idő meghaladja a 10 másodpercet, az erő megölte - és nem az a tény, hogy elfogult szakasz: a legjobb, akkor lehet, hogy a felhasználó látni valamit, hogy ne lásson, vagy legalábbis nem kattintva néhány gomb.
Optimalizálás, optimalizálás csak. És próbára szkripteket. És ezek az eszközök, ahol meg kell dolgozni. Abban az esetben, valaki elfelejtette - a kód, hogy hogyan kell csinálni:
És ez sokkal jobb, ha az átfutási idő lesz a legtávolabb a kritikus 10 másodperc - sosem tudhatod, mit lóg a háttérben, és eszik ki a források és melyik változat a készülék lesz a felhasználó a kezében (illetve - teljesítmény). Bár a szkriptek is közel ezen a szinten, akkor vegye le a kezét.
Alapértelmezésben a mobil változata Safari egy csúnya funkció, amely azt veszi észre, amikor ellenőrzi a projekt szigorú elrendezés:
sarkok elemek az input és textarea vannak kerekítve.
Ez megoldható ez csak - nullázás keresztül CSS tulajdonságok border-radius:
Inkább kell tennie, hogy a valamennyi böngésző egyszerre [paranoia]. bár lehet csinálni egy sorban.
Kiderült, hogy a Label'ami van egy kis probléma. Mint ismeretes, kattintson a címkét, akkor végrehajtunk egy hozzá tartozó elemet, például egy négyzetet. Mint kiderült, a mobil változata a Safari és ellenáll erősen termel semmit, ha rákattint a fenti.
Több megoldás erre a problémára, van egy tiszta js, anélkül, hogy csatlakoztassa a harmadik féltől származó könyvtárak, de tetszett a végrehajtás jQuery:
Vannak olyan esetek (sm.aktivnye kártya), amikor js ismét szeretné használni nem szükséges, és ha fölé viszi a szülő elem, hogy a korábban elrejtett gyermek. Első pillantásra, a design helyes:
Az eredmény azonban az iPhone ... semmi.
A tény az, hogy ily módon a böngészője nem fogadja a pszeudo: hover, mert ez vonatkozik az elem div.
Hogy működik megfelelően, akkor kell alkalmazni, hogy az iPhone hover-hatás pontosan az alábbi linkre:
(Ne feledkezzünk meg a szabályokat a fészkelő elemek: ebben az esetben, használja azt befogják a sikeres hitelesítés).
És biztos - a linkek:
Ezzel a megközelítéssel, ha rákattint egy linkre nem fog történni újra az oldalt, és ugyanabban az időben, megkapjuk a légpárnás művek iPhone - mint A készülékek érintőképernyős, a következő szabályokat:
- Kattints a linkre -> átmenet kapcsolat
- Click-1 linket adja meg a pszeudo: hover ->: hover tulajdonságok
- A kapcsolat egy meghatározott kattintson a pszeudo-2: hover -> átmenet link.
Most fájó hangja, és mind a mai napig - minden.
A terveket - az anyag meghatározása a tájolása az eszköz