Css правило @viewport или мета Прозорецът

Когато искаме да се създаде един прозорец на браузъра на нашето устройство, обикновено използваме HTML таг . Въпреки това, достатъчно странно, мета маркера не е "нормативен" - това не е официален стандарт W3C.

Тъй като прозорец за мета тага е предназначена единствено за да персонализирате оформлението, може да се каже, че той с право се отнася до CSS. Ето защо W3C има за цел да стандартизира нов метод адаптация, в който контролът на прозореца се прехвърля от HTML към CSS.

CSS правило @viewport

С новото правило @viewport имаме едно и също управление прозорец като мета тагове, с изключение, че такъв контрол се осъществява изключително чрез CSS. Както и при използване на мета тага, се препоръчва да настроите ширината на прозореца на браузъра с помощта на който не зависи от устройството устройство ширина:

@viewport <
ширина: устройство ширина;
>

Към днешна дата @viewport използва от програмистите да "щракне режим" в IE10 - Windows 8 функция, която ви позволява да работите в мулти режим. По ирония на съдбата, IE10 игнорира мета маркера, ако размера на прозореца е по-малка от 400 пиксела, което прави невъзможно да се оптимизира уеб сайтове, използващи тази мета тагове, такива малки прозорци. За да поправите това, програмистите трябва да използват по-горе обстановка устройство-ширина, или определят правило @viewport в заявката за медии.

Използването @viewport за медийни заявки

Ние можем да използваме, за да @viewport медийни заявки. Например, следното искане медии се използва за регулиране ширината на оформление прозорец е по-малко от 400 пиксела (например, индекс режим IE10) в ширина от 320 пиксела.

В този пример, ако устройството е конфигурирано за да се позволи на редица 640-1024, обикновено @viewport везни прозореца 640 пиксела.

@media екран и (мин ширина: 640 пиксела) и (макс ширина: 1024) @viewport
.
>

Нови описания @viewport

Въпреки факта, че можем да контролираме увеличение и функция за мащабиране, някои свойства на илюминатора - или както сега се нарича "описателни" - все още се променя.

Дескриптори на мащабиране - еквивалент на първоначалната мащаб мета-таг. Както и минимален мащаб и максимален мащаб, има описания за макс увеличение и минути увеличение:

@viewport <
ширина: устройство ширина;
мащабиране: 2;
>

Дескриптори на потребителя увеличение е еквивалентно на създаването потребителя мащабируема

@viewport <
ширина: устройство ширина;
потребителя мащабиране: фиксиран;
>

Подкрепа brauzeramiami

Към днешна дата, CSS правило @viewport поддържа само опера и IE10. Изглежда, че скоро Chrome и други браузъри ще го прилага, защото се очаква, че скоро мета маркера ще бъде новият официален уеб стандарт.

И все пак, за да се произнесе @viewport необходимо да се добавят представката версията продавача:

@ -MS-Прозорецът <
ширина: устройство ширина;
>
@ -о-Прозорецът <
ширина: устройство ширина;
>
@viewport <
ширина: устройство ширина;
>

Разбира се, ние все още трябва да включва прозорец за мета маркер в страницата с HTML, като В близко бъдеще не е да ходя никъде. Но това не е толкова лошо да погледнем в бъдещето - добавянето на правила @viewport само прави нашите уебсайтове и приложения са готови за промяна

Общият брой на грешка

Често срещана грешка е, че разработчиците често използват стойността на първоначалния мащаб = 1 neadptivnyh шаблони. Тази настройка води до изобразяването на страницата 100% без мащабиране. Ако проектът не е адаптивна, потребителят има много превъртане, или ръчно да зададете, за да видите цялата страница. В най-лошия случай - комбинация от потребителя мащабируеми = няма или максимален мащаб = 1 с първоначалното мащаб = 1. По този начин тя се изключва възможността за мащабиране на сайта. Без мащабиране не е възможно да се види цялата страница. Ако вашият шаблон не е адаптивна, а не забраните мащабиране и не изпускайте първоначалния мащаб!