regula css @viewport sau meta viewport

Când vrem să stabilească o fereastră de browser pe dispozitivul nostru, folosim de obicei tag-ul HTML . Cu toate acestea, destul de ciudat, meta tag-ul nu este „normativ“ - nu este un standard W3C oficial.

Deoarece tag-ul meta viewport este destinat exclusiv pentru a personaliza aspectul, se poate spune că el se referă în mod corect la CSS. Acesta este motivul pentru care W3C caută să standardizeze o nouă metodă de adaptare, în care fereastra de control este transferat de la HTML la CSS.

regula CSS @viewport

Cu noul @viewport regula avem același management fereastră ca etichetă meta, cu excepția faptului că un astfel de control se realizează exclusiv prin intermediul CSS. Precum și utilizarea meta tag-ul, este recomandat să setați lățimea ferestrei browser-ului folosind nu depinde de dispozitivul dispozitiv lățime:

@viewport <
lățime: dispozitiv lățime;
>

Până în prezent @viewport folosite de programatori pentru a „modul de completare snap“ în IE10 - Windows 8 facilitate care vă permite să lucreze în modul multi. În mod ironic, IE10 ignoră meta tag-ul, în cazul în care dimensiunea ferestrei este mai mică de 400 de pixeli, ceea ce face imposibilă pentru a optimiza site-uri web folosind această meta-tag-ul, astfel de ferestre mici. Pentru a remedia acest lucru, programatorii trebuie să utilizeze setarea dispozitivului lățimea menționată mai sus, sau a defini o regulă @viewport în interogare mass-media.

Utilizarea @viewport la interogări media

Putem folosi @viewport la interogări media. De exemplu, următoarea solicitare media este utilizată pentru a ajusta lățimea ferestrei de aspect este mai mică de 400 de pixeli (de exemplu, modul INDEX IE10), în lățime de 320 de pixeli.

În acest exemplu, dacă dispozitivul este configurat pentru a permite o gamă de 640-1024, în mod tipic @viewport scalează fereastra 640 pixeli.

@media ecran și (min-lățime: 640 x) și (max-width: 1024px) @viewport
.
>

descriptori noi @viewport

În ciuda faptului că putem controla zoom și o funcție de zoom, unele proprietăți ale imaginii curente - fie ca acestea sunt acum denumite „descriptori“ - încă schimbat.

Zoom Descriptor - echivalentul a scară inițiale meta-tag-ul. Precum și la scară minimă și maximă la scară, există descriptori pentru max-min zoom și zoom:

@viewport <
lățime: dispozitiv lățime;
Zoom: 2;
>

Descriptor de utilizator zoom este echivalent cu setarea scalabilă-utilizator

@viewport <
lățime: dispozitiv lățime;
utilizator zoom: fix;
>

Suport brauzeramiami

Până în prezent, regula css @viewport suportă doar Opera și IE10. Se pare că în curând Chrome și alte browsere se va pune în aplicare, deoarece este de așteptat ca în curând meta tag-ul va fi noul standard web oficial.

Cu toate acestea, pentru a exclude @viewport necesară pentru a adăuga prefixul versiunea furnizor:

@ -MS-viewport <
lățime: dispozitiv lățime;
>
@ O- viewport <
lățime: dispozitiv lățime;
>
@viewport <
lățime: dispozitiv lățime;
>

Desigur, avem încă nevoie să includă tag-ul meta viewport în pagina html, ca În viitorul apropiat nu se întâmplă nicăieri. Dar nu e așa de rău să se uite în viitor - adăugarea de reguli @viewport face doar site-urile și aplicațiile noastre sunt pregătite pentru schimbare

greșeală totală

O greșeală comună este că dezvoltatorii folosesc adesea valoarea inițială la scară = 1 șabloane neadptivnyh. Această configurare are ca rezultat redarea paginii 100% fără scalare. În cazul în care design-ul este non-adaptiv, utilizatorul are o mulțime de defilare, sau setați manual pentru a vedea întreaga pagină. Cel mai rău caz - o combinație a = fără scalabil-user sau scară maximă = 1 cu scara inițială = 1. Astfel, dezactivează capacitatea de a scala de pe site-ul. Fără scalare nu este posibil pentru a vedea întreaga pagină. În cazul în care șablonul nu este adaptiv, nu dezactivați zoom-ul și nu renunțe la scara inițială!