Imaginați-vă că ați lucrat mult timp pentru designul receptiv al site-ului și că acum îl verificați pe telefonul mobil. Și designul tău se prăbușește și în felul în care nu te aștepți deloc. Textul este greșit, animația este jignitoare și formele nu sunt la fel ca cele pe care le-ai făcut. Petreceți ore căutând soluții pe Internet și răspunsurile vă conduc în jur. Psihanuv, aruncati computerul pe fereastra si omorati accidental pisica vecinului.
Vestea bună este că pisica vecinului poate fi salvată, precum și calculatorul dvs. - în acest articol vom analiza principalele capcane ale designului receptiv:
- Modificări neașteptate în dimensiunea fontului.
- Forme de stil nedorite.
- Erorile emulatorului în browser, care raportează probleme care nu apar.
- Animație lentă pe dispozitivele mobile
- Procesarea greșită a coordonatelor de atingere.
Cerințe de bază pentru înțelegerea materialului.
Citirea acestui articol necesită cunoașterea de bază a dezvoltării web responsive. Ele pot fi găsite, de exemplu, din acest articol.
1. Modificări neașteptate în dimensiunea fontului
Modificarea orientării ecranului pe dispozitivele cu iOS poate schimba dimensiunea textului în paginile dvs. și poate distruge aspectul. Această problemă este întâlnită în mod regulat în articolele cu poziționare fixă, cum ar fi barele de meniu sau navigația. După ce sa întâmplat, puteți să remediați aspectul numai prin actualizarea paginii. Din fericire, există o modalitate de a preveni modificările nedorite în dimensiunea textului.
Doar lipiți următoarea linie de cod CSS:
Acest cod dezactivează setarea dimensiunii fontului în orientare peisaj, spunând doar browser-ului: "Hei, dacă veți îmbunătăți această dimensiune a fontului, nu o va face mai mare decât dimensiunea actuală, adică să lăsați-o la ea".
2. Stiluri de forme nedorite
Browserele de tablete și telefoane mobile conțin adesea stiluri implicite care pot strica aspectul formularelor dvs. Pentru a scăpa de stilurile implicite în elementele de formă, adăugați următorul cod CSS:
Puteți schimba în siguranță în funcție de tipurile de formulare pe care le utilizați și de stilurile utilizate. De exemplu, dacă trebuie să resetați stilurile pentru toate tipurile de intuiții, schimbați intrarea [type = text] pentru introducere. Dar fiți pregătiți pentru faptul că o astfel de resetare va afecta și casetele de selectare cu butoane radio, selectând întotdeauna selectorul corect.
3. Erori ale emulatorului, care raportează probleme care nu apar.
Dacă testați site-urile utilizând modul de emulare a dispozitivelor mobile în browser, considerați că emulatorul nu este întotdeauna corect. Aceasta este una dintre cele mai neplăcute erori atunci când primiți un mesaj despre o problemă și nu vedeți nimic rău în codul dvs.
De exemplu, într-o zi am pierdut o bară de navigare de la subsol. După lungi încercări de a afla ce e rău, am observat că emulatorul Chrome a tăiat partea de jos a domeniului. Sa dovedit pentru că am observat că în partea de jos a barei de derulare verticală a fost tăiată la jumătate. Pentru a rezolva problema, a fost pur și simplu necesară deschiderea paginii într-o filă nouă, pornirea / oprirea modului mobil și apoi actualizarea paginii.
În astfel de situații, este important, în primul rând, să vă asigurați că totul este în ordine cu codul dvs. Vă sugerez izolarea zonei problema dacă văd că codul funcționează singur. Dacă codul funcționează, verificați-l pe un dispozitiv mobil real. Și dacă totul este normal, atunci cel mai probabil problema nu este cu codul, ci cu emulatorul.
4. Animație lentă pe dispozitivele mobile
Dacă utilizați animații pe dispozitive mobile, ar trebui să acordați mai multă atenție performanței lor. De fapt, browserele animă în mod efectiv următoarele 4 proprietăți: traduceți. scară. rotire și opacitate. Iată cum ar putea să arate:
Aceste 4 proprietăți sunt bine animate, deoarece sunt în stratul superior al ceea ce face browser-ul. Dacă vă imaginați o pagină web ca o masă, atunci animația acestor proprietăți va fi asemănătoare cu schimbarea lingurii sau furculiței, iar animația celorlalți va scoate toată masa de masă. Puteți face acest lucru, dar va fi nevoie de mult mai mult de lucru decât să trageți pe nivelele superioare.
Mai multe informații despre animațiile de înaltă performanță pot fi găsite în acest articol.
Pentru a maximiza compatibilitatea cu browser-ul încrucișat al animațiilor dvs., în special pe dispozitivele Apple, adăugați prefixul -webkit- la proprietățile de transformare. De exemplu:
Informații mai detaliate despre susținerea animației proprietății transformate se află pe caniuse.
Ca supliment, observ că prezența umbrelor (box-shadow) poate încetini uneori semnificativ animația pe dispozitive mobile, în funcție de numărul de animații și de greutatea totală a paginii. Și în cazul umbrelor, vă recomand să testați temeinic performanța animațiilor.
5. Procesarea incorectă a coordonatelor de atingere.
Obținerea coordonatelor de atingere poate fi complicată deoarece dispozitivele diferite pot stoca aceste coordonate în diferite locuri. Pe unele dispozitive (iOS), coordonatele vor fi identice cu coordonatele clicului, iar altele (Android), acestea ar trebui să fie căutate în altă parte. Vestea bună este că coordonatele de atingere pot fi găsite în date specializate despre evenimentele touch ale oricărui dispozitiv mobil pe care trebuie să îl sprijiniți.
Pentru evenimentele touch, trebuie să utilizați e.touches [0] .pageX în loc de e.pageX. pentru a obține coordonatele corecte de atingere; Același lucru este valabil și pentru coordonatele pentru Y. Iată câteva exemple, astfel încât să puteți evalua modul în care arată acest cod în practică.
Coordonatele unui click de mouse sunt obtinute de obicei dupa cum urmeaza:
Și pentru a obține coordonatele de atingere, aveți nevoie de următorul cod:
Dacă dispozitivele nu funcționează cu e.pageX și e.pageY. acestea vor fi în continuare disponibile, însă valoarea lor pentru evenimentele atingeți va fi 0. Am menționat acest lucru deoarece un simplu test al existenței lor în browser nu înseamnă funcționarea lor normală.
Dacă utilizați evenimente jQuery, considerați că au propriul set de date. Puteți evalua diferențele față de codul anterior:
Indiferent dacă definiți locația clicurilor sau atingerilor mouse-ului, trebuie să vă asigurați că extrageți corect coordonatele.
concluzie
Trimiteți-le prietenilor: