Sfat rapid Nu uitați Meta Tag-ul de vizualizare

Îmi amintesc voiajul meu de plecare în designul web receptiv; Am folosit o rețea clasică, am luptat cu un aspect flexibil și am abordat pentru prima dată întrebările media. Împingerea și micșorarea ferestrei browserului a dus la o viziune satisfăcătoare a designului meu care răspundea la împrejurimile sale. Apoi l-am testat pe un telefon mobil. Nu a funcționat - mă uitam la o versiune descrescătoare a designului full-screen. Soluția, așa cum sa dovedit, a fost simplă ...

Notă: Acest tutorial a fost publicat pentru prima oară în februarie 2012, dar este adesea folosit ca referință în alte tutoriale (și lucrurile s-au schimbat), așa că am simțit că a justificat o actualizare.

Opțiuni premium

Acest tutorial vă va învăța despre utilizarea etichetei meta tag-urilor de vizualizare, dar dacă aveți nevoie de ajutor pentru a crea un site web receptiv, există mulți designeri care să vă ajute pe Envato Studio. Iată câteva dintre cele mai bune opțiuni:

1. Design și dezvoltare site responsabilă

Acest furnizor din Marea Britanie va crea un design personalizat și o dezvoltare personalizată bazată pe branding, culori, cerințe de funcționalitate și cele mai bune practici de utilizare. Site-ul dvs. web va fi unic pentru compania dvs. și setat pentru o conversie maximă. 

Vei primi:

  • Design elegant
  • Fișiere PSD complet personalizabile și scalabile
  • HTML5, CSS3, JavaScript, CMS
  • Responsabil Web Design

2. Proiectarea personalizată și responsabilă a site-ului

Dacă vă puteți descurca singur și doriți doar un design, puteți alege această opțiune, care vă va oferi un site web proiectat într-un mod profesionist. Iată ce veți obține: 

  • Proiectarea de pagină pe o rețea gata de lansare Boostrap 
  • 3 subpagini (Despre noi, Contactați-ne și FAQ sau altele similare) 
  • Submeniu și hover link / efecte buton pentru dezvoltator 
  • Structuri bine structurate și organizate

3. Responsabil de proiectare a unei pagini de o singură pagină

Acest furnizor este un web designer independent, cu o experiență profesională de peste 12 ani în domeniul designului web, al designului grafic și al interfeței utilizator UI / UX.

Veți obține un site elegant de o pagină, conceput cu un comportament receptiv în minte.

Dacă niciuna dintre aceste opțiuni nu este pentru dvs. sau dacă doriți să învățați să o faceți singură, citiți instrucțiunile.


Crux

Dacă nu citiți nimic altceva în acest post, luați un sfat puțin: dacă proiectați în mod flexibil, utilizați meta-tag-ul de vizualizare în fereastra dvs. . În forma sa de bază, vă va pune la dispoziție pentru liniștea aranjamentului dispozitivului încrucișat:


Problema

Să folosim un exemplu de aspect pe care l-am bătut împreună. Aruncă o privire; veți vedea că se micșorează și se mărește pe măsură ce modificați dimensiunea browserului. Există, de asemenea, o singură interogare media care face ca textul să fie mai mare și oferă o poziție luminată # ff333e culoare pe ecrane mai largi. Minunat.

Iată cum arată în OSX Chrome:


Iată cum apare atunci când fereastra browserului este șters:


Acum, să vedem cum arată acest lucru pe un smartphone (în acest caz iOS Safari pe un iPhone 4):


Primul lucru pe care îl veți observa este rubrica roșie; un dăruitor mort că nu ne uităm la aspectul îngust pe care ne-am aștepta. De fapt, ne uităm la o versiune mărită.

iOS Safari își asumă o pagină web de 980 de pixeli lățime, zooming pentru a se potrivi întregului lot în cadrul disponibil (iPhone 4) 320px. Conținutul este atunci mult mai puțin lizibil, dacă nu măriți.


De ce?

După cum se spune, ipoteza este mama tuturor ... ceva, dar asta este exact ceea ce trebuie să faceți browserele mobile dacă nu le instruiți în mod specific. Când vizitați un site web prin intermediul unui browser mobil, acesta va presupune că vizionați o experiență desktop mare și că doriți să vedeți totul, nu doar colțul din stânga sus. Prin urmare, va seta lățimea ferestrei de vizualizare la (în cazul lui iOS Safari) 980 pixeli, ceea ce face ca pantofii să fie în afișajul său mic.


Meta Tag-ul Viewport

Introduceți meta-tag-ul "Viewport", introdus de Apple, apoi adoptat și dezvoltat de alții.

Se pare ca aceasta:

În cadrul content = "" puteți introduce o încărcătură de valori delimitate cu virgulă, dar acum ne vom concentra pe cele fundamentale.

De exemplu, dacă designul dvs. mobil este prevăzut în mod intenționat la 320px, puteți specifica lățimea ferestrei de vizualizare:

Pentru machete flexibile, este mai practic să vă bazați lățimea ferestrei de vizualizare pe dispozitivul în cauză, pentru a se potrivi lățimii de dispunere cu lățimea dispozitivului pe care o introduceți:

Pentru a vă asigura că aspectul dvs. va fi afișat așa cum ați intenționat, puteți seta și nivelul de zoom. Aceasta, de exemplu:

... se va asigura că, la deschidere, aspectul dvs. va fi afișat corespunzător la scara 1: 1. Nu se va aplica zoom-ul. Puteți merge mai departe și puteți preveni orice zoom de către utilizator:

Notă: Înainte de a aplica parametrul maxim pe scară, analizați dacă ar trebui să împiedicați utilizatorilor să facă zoom-uri. Pot citi totul cât mai bine?

Folosind meta-tag-ul pentru vizualizare, calea greșită poate împiedica accesul utilizatorilor cu probleme vizuale la site-ul dvs. Web

- Proiectul de accesibilitate

Pune-o pe toți împreună

Aceste valori împreună ne dau o mare implicitate în a lucra cu:

Să vedem cum afectează exemplul nostru


După cum puteți vedea, totul rămâne la scara corectă. Textul se înfășoară în loc să se micșoreze, iar ajutorul nostru vizual (rubrica roșie) a dispărut.


Dar!

Sfat de hat pentru Jason pentru a arăta acest lucru în comentariile. Afirmând că lățimea aspectului dvs. este egală cu lățimea dispozitivului, veți întâlni probleme când un dispozitiv este utilizat în peisaj. Aruncati o privire la modul in care un iPhone 4 se ocupa de demo-ul nostru, in peisaj:


Ruinat.

Browserul se simte obligat să mărească, pentru a se potrivi cu lățimea paginii.

Pentru a obține acest lucru, am putea, după cum afirmă Jason, să folosiți JavaScript pentru a alege în mod condiționat ce atribute metatag să treacă, dar cea mai simplă soluție pare să fie pur și simplu ignorarea lăţime cu totul. Doar prin setarea Scara inițială lățimea este dedusă. Acesta este modul în care noul nostru demo simplificat apare în peisaj:


Mult mai bine.

Nu standardul pe care îl căutați

Metatagul de vizualizare a imaginilor a fost soluția Apple a problemei. A fost adoptată rapid de alte platforme, dar nu a fost niciodată prezentată de W3C. Microsoft a adus la cunoștință acest lucru atunci când a ales ca IE10 să ignore metatagul de vizualizare în anumite circumstanțe. În schimb, au optat pentru utilizarea CSS Device Adaptation, care este ceea ce se bazează W3C.

Pe scurt, proprietățile de vizualizare similare sunt definite în CSS utilizând regula @viewport, în loc de HTML.

@viewport zoom: 1.0; lățimea: lățimea dispozitivului; 

Sau, în conformitate cu noile noastre nu specificați lățimea dispozitivului , am putea stabili următoarele:

@viewport zoom: 1.0; lățime: extindere la zoom; 

Având în vedere că este o lucrare în curs, IE10 necesită versiunea prefixată a propunerii, care arată cam așa:

@ -ms-viewport lățime: extend-to-zoom; zoom: 1,0; 

Este o soluție mult mai elegantă decât metatagul, dar este departe de a fi pe deplin sprijinită. Introduceți-l acum în CSS-ul dvs. pentru a vă asigura că designul dvs. receptiv se comportă în modul "snap" al IE10 și păstrați atenția asupra progresului acestuia în viitor. Aici este condus controlul ferestrei de vizualizare.

Puteți citi mai multe despre acest lucru în modul postului IE10 Snap Mode și Responsive Design al lui Tim Kadlec.


Concluzie

Responsabilitatea web design-ului nu este doar pentru cei care se bucură de vizionarea browserelor lor cresc și se micșorează, este vorba de catering pentru cât mai multe dispozitive, ecrane și rezoluții cât mai mult posibil! Aruncați meta-tag-ul din portul de vizualizare în fereastra dvs. , plus regulile @viewport în CSS atunci când construiți machete flexibile și sunteți bine să mergeți.


Citirea în continuare

  • Documentația Apple: Folosind Meta Tag-ul Viewport
  • Mozilla: Folosind meta-tag-ul viewport pentru a controla aspectul pe browserele mobile
  • quirksmode.org: O poveste a două ferestre de vizualizare
  • w3.org Cele mai bune practici ale aplicațiilor web mobile: Utilizați elementul Meta Viewport pentru a identifica dimensiunea dorită a ecranului
  • Sfat rapid: Nu utilizați niciodată scara maximă = 1.0 pentru Proiectul A11y
  • Tim Kadlec explică modul IE10 Snap și designul receptiv
  • Propunerea regulii @viewport

Soluții gata

Puteți găsi, de asemenea, mii de teme și șabloane receptive de înaltă calitate pe ThemeForest și o gamă imensă de scripturi, pluginuri și add-on-uri în categoria "responsive" de pe CodeCanyon.