5 Az érzékeny tervezés buktatói és azok leküzdésének módjai
Képzelje el, hogy hosszú ideje dolgozik az oldal érzékeny tervezésén, és most ellenőrizze a mobilján. És a terved összeomlik, és olyan módon, ahogy egyáltalán nem számítottál. A szöveg megfordul, az animáció szaggatott, és a formák egyáltalán nem olyanok, mint azok, amiket tettél. Órákat töltesz órákban, hogy megoldásokat találjunk az interneten, és a válaszok keressenek. Psihanuv, dobja ki a számítógépet az ablakon és véletlenül megölte a szomszéd macskáját.
A jó hír az, hogy a szomszéd macskája megmenthető, valamint a számítógéped - ebben a cikkben megnézzük a megfelelő tervek főbb buktatóit:
- A betűméret váratlan változásai.
- Nem kívánt formanyomtatványok.
- Emulátor hibák a böngészőben, jelentési problémák, amelyek nem.
- Lassú animáció mobileszközökön
- A rossz érintés koordinálja a feldolgozást.
Alapvető követelmények az anyag megértéséhez.
A cikk olvasása megkívánja, hogy alapos ismerete legyen a megfelelő webes fejlesztésnek. Ezek például a cikkből származnak.
1. A betűméret váratlan változásai
A képernyő tájolásának megváltoztatása az iOS rendszerű eszközökön megváltoztathatja az oldalak szövegének méretét, és elpusztíthatja az elrendezést. Ez a probléma rendszeresen találkozik olyan helyeken, mint például a menüsorok vagy a navigáció. És ezután megtörtént, csak az oldal frissítésével tudja megjavítani az elrendezést. Szerencsére van mód a nem kívánt változások megakadályozására a szöveg méretében.
Csak illessze be a következő CSS kódot:
Ez a kód letiltja a betűméretet fekvő helyzetben, csak a böngészővel: "Hé, ha javítani szeretné ezt a betűméretet, akkor ne legyen nagyobb, mint a jelenlegi méret, azaz hagyja abba."
2. Nem kívánt formanyomtatványok
A táblagépek és a mobiltelefonok böngészői gyakran olyan alapértelmezett stílusokat tartalmaznak, amelyek megzavarhatják űrlapjainak megjelenését. Az űrlapelemek alapértelmezett stílusainak megszabadításához adja hozzá a következő CSS kódot:
Biztonságosan megváltoztathatja a használt űrlapok és a használt stílusok alapján. Például, ha mindenféle intuícióhoz vissza kell állítania a stílusokat, módosítsa a bevitel [type = text] bemenetet. De készülj fel arra a tényre, hogy egy ilyen visszaállítás a választógombokat a rádiógombokkal is érinteni fogja, mindig válassza ki a választót.
3. Az emulátor hibái, amelyek nem jelentenek problémákat.
Ha webhelyeit a mobileszköz-emulációs mód használatával teszteli a böngészőben, vegye figyelembe, hogy az emulátor nem mindig megfelelő. Ez egyike a leginkább kellemetlen hibáknak, amikor egy üzenetet kap egy hibáról, és nem lát semmi hibát a kódban.
Például egy nap elvesztettem egy navigációs sávot a láblécről. Miután régóta megpróbáltam kideríteni, mi a baj, észrevettem, hogy a Chrome emulátor csak lefedte a hatókör alját. Kiderült, hogy észrevettem, hogy az oldal alján a függőleges görgetősávot félig levágták. A probléma megoldásához egyszerűen meg kellett nyitnia az oldalt egy új lapon, be kell kapcsolnia a mobil üzemmódot, majd frissítenie kell az oldalt.
Ilyen helyzetekben először is fontos annak biztosítása, hogy minden rendben van a kóddal. Azt javaslom, hogy elkülönítsd a problématerületet, ha látom, hogy a kód önmagában működik. Ha a kód működik, ellenőrizze azt egy valós mobil eszközön. És ha minden rendben van, akkor valószínűleg a probléma nem a kóddal, hanem az emulátorral történik.
4. Lassú animáció mobileszközökön
Ha mobileszközökön animációkat használ, nagyobb figyelmet kell fordítania a teljesítményükre. Valójában a böngészők hatékonyan animálják a következő 4 tulajdonságot: lefordítanak. skála. forgatás és homályosság. Így néz ki:
Ezek a 4 tulajdonságok jól animáltak, mivel a böngésző legfelső rétegei. Ha elképzelni egy weboldalt étkező asztalként, akkor ezeknek a tulajdonságoknak az animációja hasonló lesz a kanál vagy a villák eltolásához, és a többiek animációja kihúzza az egész asztalterítőt. Ezt megteheti, de sokkal több munkát igényel, mint a felső szinteken.
A nagy teljesítményű animációkról további információ található ebben a cikkben.
Annak érdekében, hogy maximalizálja az animációk keresztböngésző-kompatibilitását, különösen az Apple eszközökön, adja hozzá a -webkit-előtagot az átalakítási tulajdonságokhoz. Például:
Részletesebb információ a transzformációs tulajdonság animációjának támogatásáról a caniuse-ban található.
Kiegészítésként megjegyzem, hogy az árnyékok (box-shadow) jelenléte néha jelentősen lassítja az animációt a mobileszközökön, attól függően, hogy az animációk száma és az oldal teljes tömege milyen. És árnyékok esetében azt javaslom, hogy alaposan teszteljük az animációk teljesítményét.
5. Érintő koordináták hibás feldolgozása.
Az érintkezési koordináták megkerülése bonyolult lehet, mivel különböző eszközök tárolhatják ezeket a koordinátákat különböző helyeken. Egyes eszközökön (iOS) a koordináták megegyeznek a kattintás koordinátáival és másokkal (Android), azokat máshol kell keresni. A jó hír az, hogy az érintőképernyő koordinátái megtalálhatók az olyan mobileszközök érintési eseményeihez kapcsolódó speciális adatokon, amelyeket támogatni kell.
Érintéses események esetén az e.pageX helyett e.touches [0] .pageX-et kell használnia. hogy megkapja a helyes érintkezési koordinátákat; Ugyanez vonatkozik az Y koordinátáira. Íme néhány példa, így értékelheted, hogy a kód hogyan néz ki a gyakorlatban.
Az egérkattintás koordinátáit általában az alábbi módon kapjuk meg:
Az érintőképernyő koordinátáinak megszerzéséhez a következő kódot kell megadnia:
Ha az eszközök nem működnek az e.pageX és az e.pageY eszközökkel. még mindig elérhetőek lesznek, de értékük az érintési eseményekre 0 lesz. Megemlítettem, mert a böngészőben egy egyszerű teszt létezésük nem jelenti a normális működésüket.
Ha jQuery eseményeket használsz, úgy gondolod, hogy rendelkeznek saját adatkészletével. Az előző kóddal kapcsolatos különbségeket kiértékelheti:
Függetlenül attól, hogy megadja-e az egérkattintás helyét vagy a megérintéseket, gondoskodnia kell arról, hogy helyesen húzza ki a koordinátákat.