Părerile sunt ca niște oase - fiecare le are pe ale lui. Tot ce ai vrut să știi despre metaeticheta viewport

Bună ziua, sau mai bine zis noapte, dragi prieteni. Cu doar câteva minute în urmă lucram la adăugarea unor topituri la șablon. Șablonul nu era adaptiv și problema era în structura sa, ascundea o parte din conținut (era nevoie de asta), iar la accesarea dintr-un browser mobil (de pe telefon sau tabletă), atât conținutul, cât și o bucată de pagina a fost tăiată. Am încercat să corectez această neînțelegere, iar în timpul „testării pe teren în practică” mi-am dat seama că cea mai bună soluție este folosirea metaetichetei viewport.

Eticheta este concepută pentru a scala corect site-ul pe diferite dispozitive, de exemplu pe dispozitive în care rezoluția ecranului este mai mică decât este necesar. Eticheta este adesea folosită în șabloanele responsive, dar puțini oameni știu că poate fi util și în design-urile obișnuite non-responsive.

Să ne uităm la regulile posibile pentru utilizarea etichetei:

1. Latime

Cu aceasta indicăm un număr întreg în pixeli (de la 200px la 10000px) sau „lățimea dispozitivului”. Aceasta setează lățimea ferestrei de vizualizare, dar dacă lățimea nu este specificată pentru dvs., aceasta este luată automat:

• 980px - pentru Safari mobil
• 850px - Opera
• 800px - Android WebKit
• 974px - IE

2. Înălțime

Funcționează pe același principiu ca lăţime. Cu toate acestea, adesea, în 99% din cazuri, pur și simplu nu este utilizat, așa că nu trebuie să îl configurați dacă nu știți dacă aveți nevoie sau nu. Oricum, poți experimenta cu el...

3.Scara inițială

Acest parametru setează scara paginii. Totul este elementar aici, crește valoarea - mărește scara. Următoarele valori sunt disponibile pentru acesta de la 0,1 la 10. Dacă îl setați la 1,0, atunci vă vom indica să nu scalați pagina.

4. Scalabil de utilizator

Setează capacitatea de a schimba scara paginii. Poate moșteni valori da sau Nu. În browserul Safari, valoarea implicită este da,

5. La scară minimăȘi la scară maximă

Acești parametri determină scalele minime și maxime permise ale metaetichetei de vizualizare. Valorile disponibile pentru acesta sunt de la 0.1 la 10. Dacă îl setăm la 1.0, vom anunța browserul că nu va scala pagina. În browserul mobil Safari, sunt setate valorile minim-scale = „0,25” și maxim-scale = „1,6”.

Acum să trecem direct la exemple de utilizare.

De obicei, metaeticheta de vizualizare este utilizată pentru a seta lățimea și scara inițială a ferestrei de vizualizare a site-ului pe dispozitive mobile, de exemplu:

Puteți urma exact același exemplu dacă conținutul dvs. nu este larg (nu este tăiat de browser), ci mai degrabă îngust (un spațiu gol apare undeva):

O greșeală comună pe care o puteți avea atunci când utilizați metaeticheta viewport este aceea că veți folosi valoarea scara inițială=1 pentru șabloanele care nu răspund. Ce s-a întâmplat? Ceea ce este greșit aici este că această opțiune va avea ca rezultat redarea 100% a paginii fără scalare. Astfel, utilizatorul va trebui să seteze singur scala sau să deruleze pagina mult și pentru o perioadă lungă de timp.

Partajarea parametrilor poate fi, de asemenea, considerată o eroare. user-scalable=nu sau maxim-scale=1 impreuna cu scara inițială=1. Făcând acest lucru, vom dezactiva capacitatea de a scala pe site (pe șabloanele mobile, această caracteristică poate fi desigur utilă, dar cu greu...). Deoarece dezactivăm zoomul, nu vom avea șansa de a vedea întreaga pagină.

Personal, nu vă pot recomanda decât un singur lucru. Dacă șablonul dvs. nu este adaptabil la dispozitive mobile și alte dispozitive ale căror dimensiuni ale ecranului diferă de cele pentru care le-ați creat, atunci părăsiți opțiunea de scalare și nu modificați dimensiunile scalei.

Unii oameni cred că derularea la stânga sau la dreapta este foarte proastă și urâtă. Desigur, acest lucru nu este rău, este mai degrabă incomod în opinia mea, dar uneori această necesitate este necesară. De exemplu, clientul meu are un site web. Are o versiune completă și mobilă, fiecare dintre aceste versiuni fiind șabloane diferite. În consecință, într-un șablon pentru un desktop nu are rost să facem adaptări complexe și clopoței și fluiere pentru telefoane, eticheta de vizualizare este suficientă, dar într-unul mobil, da, totul este pentru telefoane. Aici va fi mai comod să-l folosească cineva, 2 alternative, ca să zic așa... Mulțumesc tuturor, succes!

Descrierea completă a metaetichetei fereastra de vizualizareși atributele sale. Exemple, note și recomandări pentru adaptarea unui site pentru dispozitive mobile. Precum și metaetichete suplimentare și utile: HandheldFriendly, MobileOptimizedȘi Apple-mobile-web-app-cap.

• Metaetichetă Viewport
  • Atributele metaetichetei Viewport
• Meta-etichete suplimentare și utile
  • Etichetă meta HandheldFriendly
  • Metaetichetă MobileOptimized
  • Meta-etichetă apple-mobile-web-app-capable
• Set recomandat de metaetichete

Metaetichetă Viewport

Metaetichetă fereastra de vizualizare spune browserului exact cum să gestioneze dimensiunile paginilor și să le scaleze. Această etichetă trebuie adăugată la secțiunea cap.

Notă: metaetichetă post de vizualizare nu face parte dintr-un standard formal și face parte din specificație Adaptarea dispozitivului CSS(http://goo.gl/FSTGbn). Dar până când această specificație este finalizată și adoptată pe scară largă, se recomandă utilizarea metaetichetei fereastra de vizualizare separat și în combinație cu stiluri @portul de vizualizareîn scopuri de compatibilitate.

Exemplu:

Atributele metaetichetei Viewport

Metaetichetă fereastra de vizualizare poate avea următoarele atribute, separate prin virgulă (,):

lăţime- latimea zonei de vizionare.

Valoarea atributului este un întreg nenegativ al 200 inainte de 10000 pixeli sau constantă lățimea dispozitivului, care setează lățimea paginii pentru a se potrivi cu dimensiunea ecranului.

Dacă valoarea nu este specificată, valoarea implicită este setată la - în Safari mobil = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Notă: Pentru site-urile cu design responsive, se recomandă utilizarea: width=device-width .

înălţime- inaltimea zonei de vizionare.

Valoarea atributului este un număr întreg nenegativ de la 233 inainte de 10000 pixeli sau constantă înălțimea dispozitivului, care setează înălțimea paginii pentru a se potrivi cu dimensiunea ecranului.

Notă: dacă este specificat atributul lăţime, specificați atributul înălţime nu este necesar.

scară inițială- scara inițială a paginii.

0.1 inainte de 1.0 . Sens 1.0 definește scara 1:1 , adică "nu scala"

Notă: pe unele sisteme de operare (iOS, Windows Phone etc.) Lățimea paginii, atunci când este rotită, rămâne neschimbată. În loc să redistribuie conținutul, acesta este scalat. Prin urmare, se recomandă utilizarea: scara inițială=1,0.

scalabil de utilizator- disponibilitatea scalarii paginii de catre utilizator.

Valoarea atributului este booleană " da"(1) - poate fi scalat sau " Nu„(0) - nu poate fi scalat.

Notă: Se recomandă utilizarea valorii " da", și pentru că este instalat implicit, atunci scalabil de utilizator poate să nu fie specificat.

la scară minimă- scara minimă a zonei de vizualizare.

Valoarea atributului este un număr cu un punct de la 0.1 inainte de 1.0 . În browserul mobil Safari, valoarea implicită este 0,25. Sens 1.0 definește scara 1:1 , adică "nu scala"

la scară maximă- scară maximă a ferestrei.

Valoarea atributului este un număr cu un punct de la 0.1 inainte de 1.0 . Browserul mobil Safari este implicit 1.6. Sens 1.0 definește scara 1:1 , adică "nu scala"

Notă: evitați atributele scalabil de utilizator, la scară minimăȘi la scară maximă, deoarece au un impact negativ asupra accesibilității conținutului.

Meta-etichete suplimentare și utile

Metaetichetă HandheldFriendly determină dacă o pagină de site este optimizată pentru dispozitive mobile pe Palm și Blackberry, într-un browser precum AvantGo. Acum este recunoscut de multe alte browsere mobile.

Exemplu:

Metaetichetă MobileOptimized(http://goo.gl/ZpLjZz) setează lățimea ferestrei de vizualizare în browserele mobile IE Mobile sau Pocket IE. Este analog cu atributul lăţimeîn metaeticheta fereastra de vizualizare.

Exemplu:

Metaetichetă Apple-mobile-web-app-cap(http://goo.gl/VGDYQC) permite paginii să funcționeze în modul ecran complet, relevant pentru dispozitivele mobile Apple.

Exemplu:

Setul de metaetichete pe care îl folosesc pentru site-uri cu design responsive, adaptate pentru dispozitive mobile:

Salutare tuturor și astăzi vom vorbi despre ce este viewportși cum să-l folosești.

Pentru a înțelege ce este, aveți nevoie de un fel de dispozitiv mobil. Acum să creăm un simplu html pagina cu urmatorul continut:

post de testare

acesta este un post de testare

altă postare

asta e destul de misto

Postare noua

Acum să deschidem pagina noastră pe un dispozitiv mobil și ce vom vedea? Și vom vedea că textul este prea mic și greu de citit. Cu toate acestea, dacă adăugăm următoarea etichetă de conținut la etichetă cap

Acum textul pare normal. Aici este desenul. În stânga fără etichetă, iar în dreapta cu ea

De ce se întâmplă asta? Cert este că browserul în mod implicit crede că site-ul este făcut pentru versiunea desktop a browserului și încearcă să îl încadreze complet în fereastra smartphone-ului tău. Prin setarea etichetei, îi spunem browserului telefonului că lățimea de vizualizare este egală cu lățimea smartphone-ului. Aceasta este o etichetă atât de simplă, dar ajută foarte mult la crearea unei versiuni mobile a site-ului.

De asemenea, puteți seta scala. În acest scop este folosit scară inițială

Dacă doriți să împiedicați utilizatorul să modifice zoom-ul paginii pe smartphone-ul său, puteți scrie următoarele:

Dar trebuie să fii atent, pentru că... Se întâmplă că textul este destul de greu de citit și trebuie să îl măriți, dar dacă acest lucru este interzis, atunci veți provoca neplăceri utilizatorului.

Suport pentru browser

Android suportă, dar până la versiune 2.2 . scara initiala este 1.0

Symbian, seria Nokia 40, Motorola, Opera mobile/mini și NetFront Nu a sustine

IE acceptă cu 6 versiuni

BlackBerry acceptă începând cu versiunea 4.2.1

După cum puteți vedea, suportul nu este încă complet, dar puteți utiliza deja această etichetă deoarece... majoritatea smartphone-urilor noi o înțeleg deja.

Deci, aceasta încheie acest articol, vă mulțumesc pentru atenție.

Nu există nicio îndoială că utilizați metaeticheta viewport atunci când lucrați cu șabloane receptive. Dar știați că metaeticheta de vizualizare poate fi utilă și pentru șabloanele neresponsive? Dacă nu aveți timp să convertiți șablonul de proiect în responsive, atunci ar trebui să citiți acest tutorial pentru a utiliza metaeticheta viewport pentru a îmbunătăți aspectul designului dvs. pe dispozitivele mobile.

Utilizarea obișnuită a metaetichetei viewport

De obicei, metaeticheta de vizualizare este folosită pentru a seta lățimea și scara inițială pentru fereastra de pe dispozitivele mobile. Iată un exemplu.

Utilizarea metaetichetei viewport într-un șablon care nu răspunde

În mod implicit, lățimea ferestrei de vizualizare pe iPhone este setată la 980 px. Dar este posibil ca designul dvs. să nu se potrivească bine cu această gamă. Valoarea poate fi prea mare sau prea mică pentru șablon. Mai jos sunt două exemple. care folosesc metaeticheta viewport pentru a îmbunătăți aspectul unui șablon neresponsiv pe dispozitivele mobile.

Exemplu

Vizualizați site-ul Themify de pe dispozitivul dvs. mobil.

Captura de ecran din stânga arată aspectul site-ului fără a utiliza metaeticheta viewport. Este posibil să observați că pagina atinge ambele părți ale ecranului. Dacă adăugați o metaetichetă a ferestrei de vizualizare care specifică o lățime de 1024 px, va exista un spațiu în stânga și în dreapta.

Alt exemplu

Dacă designul tău este prea îngust, va arăta, de asemenea, ciudat. Să presupunem că lățimea containerului este de 700 px și nu se adaptează. În acest caz, aspectul va fi ca captura de ecran de mai jos din stânga - o dungă albă largă în stânga.

Problema poate fi rezolvată cu ușurință setând lățimea ferestrei de vizualizare la 720px. Lățimea designului nu se modifică, dar dispozitivul mobil îl va scala la 720px.

Eroare generala

O greșeală comună este că dezvoltatorii folosesc adesea initial-scale=1 pentru șabloanele care nu răspund. Această setare are ca rezultat redarea 100% a paginii fără scalare. Dacă designul nu este receptiv, atunci utilizatorul fie trebuie să deruleze mult, fie să seteze manual zoom-ul pentru a vedea întreaga pagină. Cel mai rău caz este combinația dintre user-scalable=no sau maximum-scale=1 cu initial-scale=1 . Acest lucru dezactivează capacitatea de a scala pe site. Și fără scalare nu există nicio modalitate de a vedea întreaga pagină. Dacă șablonul dvs. nu răspunde, nu dezactivați scalarea și nu resetați scala inițială!

Pentru o mai bună înțelegere a dimensiunilor fereastra de vizualizare pagini, ar trebui să vă uitați la ceea ce se întâmplă la cea mai mică scară posibilă a paginii. Majoritatea browserelor mobile afișează în mod implicit orice pagină la cea mai mică scară fereastra de vizualizare paginile browserului coincid complet cu ecranul la scara maximă redusă și, prin urmare, sunt egale cu imaginea fereastra de vizualizare.

Deci lățimea și înălțimea fereastra de vizualizare pagina este egală cu tot ceea ce este afișat pe ecran la cea mai mică scară. Când utilizatorul mărește, aceste dimensiuni rămân neschimbate.
Lăţime fereastra de vizualizare pagina este întotdeauna neschimbată. Dacă schimbați orientarea ecranului smartphone-ului, vizualul fereastra de vizualizare se va schimba, dar în același timp browserul mobil se va adapta la noua orientare mărind puțin astfel încât fereastra de vizualizare pagina va avea din nou aceeași lățime ca și imaginea fereastra de vizualizare.

Când comparăm browserele mobile și desktop, diferența cea mai evidentă este dimensiunea ecranului. În mod implicit, browserele mobile afișează site-uri concepute pentru browserele desktop obișnuite mult mai rău decât ar putea. De exemplu, ați deschis un site web și pare oarecum neobișnuit. Acest lucru se întâmplă fie prin reducerea dimensiunii, făcând textul și alte conținuturi prea mici, fie prin afișarea doar a unei mici părți a site-ului care se potrivește pe ecran.

Una dintre cele mai comune opțiuni pentru definirea ferestrei este următoarea opțiune, care determină lățimea paginii și setează scara inițială:

Opțiuni posibile pentru metaeticheta viewport

Atribut	Sens posibil	Descriere
lăţime	(de la 200 px - 10.000 px) sau constanta lățimii dispozitivului.	Definește lățimea ferestrei de vizualizare. Dacă lățimea nu este specificată, valoarea este setată la 980px în Safari mobil, 850px în Opera, 800px în Android WebKit și 974px în IE.
înălţime	Valoare întreagă nenegativă (de la 223 pixeli la 10.000 pixeli) sau constantă înălțimea dispozitivului	Definește înălțimea ferestrei de vizualizare. În cele mai multe cazuri, acest atribut poate fi ignorat
scară inițială	Valoare 1.0 - nu scalați	Definește scara inițială a paginii. Cu cât numărul este mai mare, cu atât scara este mai mare.
scalabil de utilizator	nu sau da	Stabilește dacă utilizatorul poate mări fereastra. Valoarea implicită este „da” în Safari mobil.
la scară minimă	Număr cu un punct (de la 0,1 la 10). 1.0 - nu scalați	Definește scara minimă a ferestrei de vizualizare. Valoarea implicită este „0,25” în Safari mobil.
la scară maximă	Număr cu un punct (de la 0,1 la 10). 1.0 - nu scalați	Definește zoom-ul maxim al ferestrei de vizualizare. Valoarea implicită este „1.6” în Safari mobil.