Nu este faptul că, un cod valid de browser, care este afișat corect pe frații desktop mai vechi va da o imagine complet diferită atunci când rula pe o platformă mobilă - acum situația este mult mai bună decât înainte. Cu toate acestea, după cum arată practica, există încă câteva nuanțe care trebuie luate în considerare. Despre cei cărora trebuia să le confruntăm în procesul de testare din Safari pentru iOS, vreau să vă spun astăzi.
Dispoziții generale
Înainte de a începe depanarea problemei apariției proiectului pe dispozitive iOS, este bine să decideți imediat - care va fi mai rentabil. Am observat adesea situația în care site-ul devine caduc, desene redundante, de dragul unei viziuni acceptabile de la iPhone. Și dacă versiunea originală a site-ului continuă să păcătuiască și să clipească ...
Uneori e mult mai bine (atât economic cât și utilizabil) să folosești versiunea mobilă, cu stilurile și scripturile tale. Determinați de la ce dispozitiv a venit utilizatorul la noi pur și simplu:
Puteți conecta stiluri fără a utiliza JS în 2 moduri:
- prin @media în foaia de stil principală
- indicând în cap calea către stil
Un exemplu al primei metode este descris mai jos, în elementul "Imagini", cel de-al doilea arata astfel:
Principiul de funcționare este același în ambele variante - utilizăm ca identificator rezoluția maximă a dispozitivului pe care va fi afișat proiectul. Puteți scrie, în același timp, același lucru, numai fără "numai" - acesta este un fel de protecție împotriva browserelor mai vechi.
În principiu, puteți trimite imediat utilizatorului versiunea mobilă a site-ului (un exemplu pentru iPad):
Cu toate acestea, după cum arată practica, versiunea mobilă nu este întotdeauna convenabilă și, mai important, nu este întotdeauna familiară cu utilizatorul. Mai bine dați dreptul de a alege: de exemplu, atunci când accesați pentru prima dată pagina site-ului cu o întrebare / sugestie de a utiliza versiunea pentru mobil.
Fotografii:
Dezvoltatorii web, verificând codul pentru viabilitate în timpul iOS, întâmpină ocazional problema utilizării unor imagini mari ca fundal. În plus, "mare" ar trebui să fie înțeles ca voluminos în rezoluție. După cum sa dovedit, există o limitare artificială pentru Safari care rulează iOS.
Pe scurt, situația este următoarea:
- În cazul în care la bord mere devaysa RAM 256 MB, atunci dimensiunea maximă a imaginilor care pot fi utilizate în siguranță - 3 megapixeli (care, de fapt, ≤ 3 * 1024 * 1024 = 3145728 pixeli).
- Dispozitivele cu o capacitate de memorie RAM mai mare de 256 MB vor afișa corect imaginile de până la 5 megapixeli.
Motivația principală a acestei decizii, în conformitate cu cele mai multe Apple, este o rată scăzută de date în EDGE, rețelele 3G și Wi-Fi, dar aderarea rigidă la volumul de memorie face în mod explicit în mod clar că acest lucru nu este altceva decât o încercare de a evita „vrac“, care în mod inevitabil vor apărea atunci când se decodifică și scalarea imaginilor mari.
Este de remarcat faptul că aceste restricții sunt relevante pentru imaginile .GIF. PNG și format .TIFF. În ceea ce privește imaginile JPEG, puteți utiliza imagini cu o conștiință clară de până la 32 de megapixeli, dar numai în modul de subeșantionare. Îmi amintesc că atunci când salvezi o imagine în același Photoshop, subeșantionarea este utilizată automat pentru nivelul de calitate "scăzut" și "mediu". Aceasta, la rândul său, înseamnă că, de fapt, rezoluția maximă pentru codare în calitate mai mult sau mai puțin acceptabilă este limitată la aceleași 32/16 = 2 megapixeli.
Am redus imaginea într-o imagine mai mică, încărcând-o cu una din metodele descrise mai sus, de exemplu - prin @media:
Pentru ecrane cu o rezoluție> 1024, se va afișa fundalul specificat în CSS.
Script-uri rula timp depășește 10 secunde, forța ucis - și nu faptul că este etapa părtinitoare: cel mai bun caz, este posibil ca utilizatorul va vedea ceva ce nu ar trebui să vadă, cel puțin nu făcând clic pe câteva butoane.
Optimizare, numai optimizare. Și testați-vă scenariile. În plus, este vorba despre dispozitivele în care ar trebui să funcționeze. În cazul în care cineva a uitat - vă voi da un cod de cum se face:
Și este mult mai bine dacă timpul de plumb va fi cea mai depărtată de critice 10 secunde - nu știi niciodată ce altceva este agățat în fundal și mănâncă de pe resursele și care versiune a dispozitivului va avea utilizatorul în mâinile (respectiv - performanță). Deși, pentru scripturi care sunt chiar aproape de această marcă, ar trebui să vă scoateți mâinile.
În mod implicit, versiunea mobilă a Safari are o caracteristică neplăcută, pe care o observi când verificați proiectul pentru a respecta strict aspectul:
unghiurile elementelor de intrare și textarea sunt rotunjite.
Aceasta este rezolvată pur și simplu prin eliminarea proprietăților de rază de graniță prin CSS:
Prefer să fac acest lucru pentru toate browserele imediat [paranoia]. deși puteți gestiona cu o singură linie.
Sa dovedit că avem și o problemă cu etichetele. După cum știți, dând clic pe o etichetă vă permite să efectuați o acțiune cu un element asociat, de exemplu, cu o casetă de selectare. După cum sa dovedit, versiunea mobilă a Safari se opune și ei, hotărând să nu facă nimic atunci când face clic pe cele de mai sus.
Există mai multe soluții la această problemă, există pe js pur, fără a conecta biblioteci terțe, dar mi-a plăcut implementarea pe jQuery:
Există cazuri (vedeți hărți active) când js nu vor să fie folosite din nou și este necesar să afișați copilul anterior ascuns când plasați cursorul peste elementul părinte. La prima vedere, designul este corect:
Cu toate acestea, rezultatul acestui lucru pe iPhone va fi ... absolut nimic.
Faptul este că într-o astfel de cheie browserul nu percepe pseudo-clasa: hover, deoarece se aplică elementului div.
Pentru a funcționa corect pe iPhone, trebuie să aplicați efecte de hover-to link-ul:
(Nu uităm de regulile pentru elementele de cuibărit: în acest caz folosim intervalul pentru a trece cu succes validarea).
Și este obligatoriu pentru referințe:
Cu această abordare, făcând clic pe link nu va reîncărca pagina și, în același timp, vom obține o hover working pe iPhone. pentru dispozitivele cu ecran tactil, se aplică următoarele reguli:
- Faceți clic pe link -> mergeți la link
- Click-1 pe link-ul cu pseudo-clasa dată: hover ->: hover properties,
- Faceți clic pe 2 pe linkul cu pseudo-clasa dată: hover -> mergeți la link.
Cel mai dureros sunat și, pentru astăzi - totul.
În planuri - materialul despre determinarea orientării dispozitivului