Добър ден или по-скоро нощ, скъпи приятели. Само преди няколко минути бях в процес на добавяне на няколко бански гащета към шаблона. Шаблонът беше неадаптивен и проблемът беше в структурата му, скриваше част от съдържанието (имаше нужда от това), а при влизане от мобилен браузър (от телефон или таблет) и съдържанието, и част от страницата бяха отрязани. Опитах се да коригирам това недоразумение и по време на "полевите тестове на практика" разбрах това най-доброто решениее използването на мета тага на прозореца за изглед.
Тагът е предназначен за правилното мащабиране на сайта на различни устройства, например на устройства, където разделителната способност на екрана е по-малка от необходимата. Използвайте маркера често в адаптивни шаблони, но малко хора знаят, че може да бъде полезно в обикновени неотзивчиви дизайни.
Нека да разгледаме възможните правила за използване на етикета:
1. Ширина
С това указваме цяло число в пиксели (от 200px до 10000px) или "ширина на устройството". Това задава ширината на прозореца за изглед, ако ширината не е посочена за вас, тогава тя се взема автоматично:
- 980px - за мобилен Safari
- 850px - Opera
- 800px - Android WebKit
- 974px - IE
2. Височина
Работи на същия принцип като ширина. Въпреки това, често в 99% от случаите той просто просто не се използва, така че не можете да го изложите, ако не знаете дали имате нужда от него или не. Както и да е, можете да експериментирате с него...
3. Първоначален мащаб
Този параметър задава мащаба на страницата. Тук всичко е елементарно, увеличете стойността - увеличете мащаба. За него са налични следните стойности от 0,1 до 10. Ако го зададете на 1,0, тогава ще посочим, че страницата не е мащабирана.
4. Потребителски мащабируем
Указва дали мащабът на страницата може да се променя. Може да наследява стойности даили не. В браузъра Safari стойността по подразбиране е да,
5. Минимален мащаби максимална скала
Тези опции определят минималния и максималния разрешен мащаб за мета тага на прозореца за изглед. Достъпните стойности за него са от 0,1 до 10. Ако го зададете на 1,0, тогава ще уведомим браузъра, че не мащабира страницата. Мобилният браузър Safari е настроен на минимален мащаб = "0,25" и максимален мащаб = "1,6".
Сега нека да преминем към случаите на употреба.
Обикновено мета тагът viewport се използва за задаване на ширината и първоначалния мащаб на прозореца за изглед на сайта на мобилни устройства, например:
Можете да следвате абсолютно същия пример, ако съдържанието ви не е широко (не е отрязано от браузъра), а по-скоро тясно (някъде се появява празно място):
Типична грешка, която може да получите, когато използвате мета тага на прозореца за изглед, е, че ще използвате стойността начален мащаб=1за неотзивчиви шаблони. Какво не е наред? Това, което не е наред тук е, че тази настройка ще доведе до изобразяване на 100% от страницата без мащабиране. По този начин потребителят ще трябва сам да зададе мащаба или да превърта страницата за дълго време.
Грешката също може да бъде споделянепараметри потребителски мащабируем=неили максимална скала=1заедно с начален мащаб=1. Това ще деактивира възможността за мащабиране на сайта (на мобилни шаблониТази функция със сигурност може да бъде полезна, но едва ли ...). Тъй като ще деактивираме мащабирането, няма да имаме възможност да видим цялата страница.
Лично аз мога да ви препоръчам само един. Ако вашият шаблон няма адаптивност за мобилни и други устройства, размери на екрана, които се различават от тези, за които сте направили, тогава оставете възможността за мащабиране и не променяйте размера на мащаба.
Някои хора смятат, че превъртането наляво или надясно е много лошо и грозно. Разбира се, това не е лошо, доста е неудобно според мен, но понякога тази нужда е необходима. Например моят клиент има уебсайт. Има пълна и мобилна версия, всяка от тези версии е различни шаблони. Съответно в шаблона за работния плот няма смисъл да се правят сложни адаптации и звънци за телефони, тагът за прозорец за изглед е достатъчен, но в мобилния, да, всичко е за телефони. Тук ще е по-удобно за някой да го използва, 2 алтернативи, така да се каже ... Благодаря на всички, успех!
Последна актуализация: 03.05.2016
Първо, нека разгледаме една от ключовите точки на приложение адаптивен дизайн- мета таг viewport (всъщност адаптивният дизайн започва с този таг). Нека започнем със следната уеб страница:
Редовна уеб страница
Това е стандартна уеб страница, която би изглеждала така в нормален браузър:
Ако обаче стартираме същата уеб страница на емулатор на мобилно устройство или на реално мобилно устройство, тогава едва ли можем да прочетем какво пише на него:
Чрез прилагане на мащабиране потребителят най-накрая може да види какво е написано там. Това обаче не е много удобно. В същото време уеб страницата има много празно пространство, което не е много красиво.
Защо се случва това? Факт е, че всеки мобилен браузър задава някои първоначални размери на страницата и след това се опитва да я адаптира към размерите на екрана на текущото мобилно устройство.
Цялата видима област на екрана на браузъра се описва от концепцията Viewport. По същество прозорецът за изглед представлява областта, която уеб браузърът се опитва да побере в уеб страница. Например браузърът Safari на iPhone и iPod задава ширината на прозореца по подразбиране на 980 пиксела. Тоест, след като получи страница и я въведе в прозорец с ширина 980 пиксела, браузърът я компресира до размера на мобилно устройство. Например, ако ширината на екрана на смартфон е 320 пиксела, тогава страницата ще бъде компресирана до този размер. И всички елементи на страницата ще имат приложен коефициент на мащабиране 320/980.
Защо в този случай се използват 980 пиксела, а да речем не реалният размер на екрана? Работата е там, че по подразбиране браузърът смята, че всяка уеб страница е предназначена за настолни компютри. А обичайната ширина на десктоп сайт може да се счита за 980 пиксела.
В този случай всеки браузър задава своя собствена ширина на областта на прозореца за изглед, по избор 980 пиксела. Други браузъри може да поддържат различни стойности за първоначалната ширина. Но те също ще извършват мащабиране.
За да избегнете тази не много приятна картина, трябва да използвате мета тага viewport. Има следното определение:
В атрибута content на мета тага можем да дефинираме следните параметри:
Параметър | Стойности | Описание |
Приема цяло число в пиксели или стойност на ширината на устройството | Задава ширината на областта на прозореца за изглед |
|
Приема цяло число в пиксели или стойност на височината на устройството | Задава височината на областта на прозореца за изглед |
|
Указва коефициента на мащабиране за първоначалния размер на прозореца за изглед. Стойност 1,0 не определя мащабиране |
||
Указва дали потребителят може да използва жестове за мащабиране на страницата |
||
Число с плаваща запетая от 0,1 и повече | Задава минималната скала на размера на прозореца за изглед. Стойност 1,0 не определя мащабиране |
|
Число с плаваща запетая от 0,1 и повече | Задава максималния размер на мащаба на прозореца за изглед. Стойност 1,0 не определя мащабиране |
Сега нека променим предишната примерна уеб страница, като използваме мета тага:
Редовна уеб страница
Уеб страницата определено изглежда по-добре благодарение на използването на мета тага viewport. Използвайки параметъра width=device-width, казваме на уеб браузъра, че първоначалната ширина на прозореца за изглед не трябва да бъде 980 пиксела или друго число, а действителната ширина на екрана на устройството. Така че тогава уеб браузърът няма да прави никакво мащабиране, тъй като имаме една и съща ширина и ширина на прозореца за изглед.
Можем да използваме и други опции, като например да попречим на потребителя да мащабира размерите на страницата:
Случи се така, че мобилните браузъри се появиха сравнително наскоро и по това време вече имаше сайтове в мрежата голяма сума. Естествено, всички тези сайтове изобщо не бяха оптимизирани за малките екрани на смартфони, а смартфоните от своя страна бяха принудени да вярват, че всички сайтове са някъде около 1000px широки (980px в Safari). Беше необходимо по някакъв начин да се реши настоящата ситуация и Apple излезе с мета таг , който според традицията по-късно беше откраднат от всички останали производители на браузъри.
Нека да разгледаме типично епично оформление на уебсайт:
html
Здравей свят
Нека го отворим в мобилен браузър. Ето какво ще видим:
Както правилно посочихте, текстът е твърде малък и това се случи, защото safari се опита да пасне на нашия сайт (който предполага, че е създаден за браузъри с ширина на екрана около 980px)
Нека сега кажем на браузъра, че нашият сайт реагира на всяка ширина на екрана.
html
Какво стана:
Е, сега всичко е много по-добре. Като обозначихме width=device-width, казахме на браузъра, че искаме прозорецът за изглед на съдържанието да бъде равен на ширината на екрана на мобилното устройство.
Можете ръчно да зададете стойност за ширина. Например content="width=320px" , но това не се препоръчва, тъй като различните смартфони могат да имат напълно различна ширина на екрана.
Много често срещан вариант е:
html
тази опция задава ширината на страницата и първоначалния мащаб (в този случай без мащабиране)
Често се използва и следното:
html
Такива стойности се използват, ако сайтът ще се използва и функционира като мобилно приложение. Тези
- когато страницата се зареди, тя няма да бъде мащабирана
- страницата ще заеме цялата ширина на мобилния браузър
- всяко персонализирано мащабиране е забранено
- достъпно е само хоризонтално и вертикално превъртане
Използвайте тази конфигурация само ако знаете какво правите.
Нека да разгледаме валидните параметри и техните стойности, налични в мета тага на viewport.
ширина
Цяло число (от 200px - 10 000px) или "ширина на устройството".
Задава ширината на прозореца за изглед. Ако прозорецът за изглед nirina не е посочен, тогава:
- за мобилно сафари е 980px
- Opera - 850px
- Android WebKit - 800px
- IE - 974px
височина
Цяло число (между 223px и 10 000px) или „височина на устройството“
задава височината на прозореца за изглед. В 99% от случаите просто игнорирайте този параметър, но ако наистина имате нужда от него, опитайте и експериментирайте. Късмет..
начален мащаб
1.0 - не мащабирайте. Задава мащаба на страницата. Увеличете стойността - увеличете мащаба.
мащабируеми от потребителя
Наличните стойности са не или да
Указва дали мащабът на страницата може да се променя. По подразбиране е да в Safari.
минимален мащаб и максимален мащаб
Налични стойности (от 0,1 до 10).
1.0 - не мащабирайте. Указва съответно минималния и максималния мащаб на прозореца за изглед.
По подразбиране в мобилното Safari е минимален мащаб = "0,25", максимален мащаб = "1,6".
съвет:Не използвайте мета тагове (включително този), докато не разберете защо е необходимо всичко това. И тествайте всичко в различни мобилни браузъри. Късмет!
Здравейте всички, днес ще говорим за какво е viewportи как да го използвате.
За да разберете какво е, имате нужда от някакъв вид мобилно устройство. Сега нека създадем проста htmlстраница като тази:
тестов пост
това е тестова публикация
друг пост
това е доста яко
нова публикация
Сега нека отворим нашата страница на мобилно устройство и какво ще видим? И ще видим, че текстът е твърде малък и труден за четене. Ако обаче добавим следния таг за съдържание към тага глава
Сега текстът изглежда добре. Ето и чертежа. Отляво без етикет, а отдясно с него
Защо се случва това? Факт е, че браузърът по подразбиране смята, че сайтът е създаден за десктоп версията на браузъра и се опитва да го побере напълно в прозореца на вашия смартфон. Чрез задаване на етикета казваме на браузъра на телефона, че ширината на изгледа е равна на ширината на смартфона. Ето такъв прост етикет, но помага много при създаването мобилна версиясайт.
Можете също да зададете мащаба. За това се използва начален мащаб
Ако искате да попречите на потребителя да мащабира страницата на своя смартфон, можете да напишете следното:
Но трябва да внимавате, защото. случва се текстът да е доста труден за четене и трябва да го увеличите, но ако това е забранено, тогава ще причините неудобство на потребителя.
Поддръжка на браузър
Поддръжка на Android, но до версия 2.2 . първоначалният мащаб е 1.0
Symbian, серия Nokia 40, Motorola, Opera mobile/mini и NetFront неподдържа
IE поддържа с 6 версии
BlackBerry поддържа от версия 4.2.1
Както можете да видите, поддръжката все още не е завършена, но вече можете да използвате този маркер, т.к. повечето нови смартфони вече го разбират.
И така, това приключва тази статия, благодаря за четенето.
→ Адаптиране на CSS устройство чрез @viewportКогато искаме да персонализираме прозореца на браузъра на нашето устройство, обикновено използваме HTML таг . Въпреки това, колкото и да е странно, мета етикетът не е „нормативен“ - не е в официалния стандарт на W3C.
Мета тагът на прозореца за изглед беше внедрен за първи път от Appleна iPhone и след това на други доставчици на браузъри. Днес се използва широко поради популярността на iOS, Android и други платформи за таблети и смартфони.
Тъй като мета тагът viewport е само за персонализиране на маркирането, можем да кажем, че той с право принадлежи на CSS. Ето защо W3C се стреми да стандартизира нов методадаптация, при която управлението на прозореца се прехвърля от HTML към CSS.
@viewport css правило
С новото правило @viewport имаме същия контрол на прозореца, както с мета тага, с изключение на това, че този контрол е изцяло чрез CSS. Както при мета тага, препоръчително е да зададете ширината на прозореца на браузъра, като използвате независима от устройството ширина на устройството:
@viewport (ширина: ширина на устройството; )
Днес @viewport се използва от програмисти за "режим на моментално заснемане" в IE10 − функция на windows 8, което ви позволява да работите в режим на няколко прозореца. Колкото и да е странно, IE10 игнорира мета тага, ако размерът на прозореца е по-малък от 400px, което прави невъзможно сайтовете, използващи този мета таг, да оптимизират за такива малки прозорци. За да поправят това, програмистите трябва да използват параметъра за ширина на устройството, споменат по-горе, или да дефинират правило @viewport в медийната заявка.
Използване на @viewport в медийни заявки
Можем да използваме @viewport в медийни заявки. Например, следната медийна заявка се използва за задаване на оформлението на прозорец, който е по-малък от 400 пиксела широк (например, режим на няколко прозорецав IE10) до ширина от 320 пиксела.
@медиен екран и (максимална ширина: 400px) @-ms-viewport (ширина: 320px; ) ... )
AT този пример, ако устройството е настроено на разделителна способност от 640 до 1024 пиксела, правилото @viewport мащабира прозореца до 640 пиксела.
@медиен екран и (мин. ширина: 640px) и (максимална ширина: 1024px) ( @viewport (ширина: 640px; ) ...)
Нови манипулатори на @viewport
Въпреки че можем да контролираме мащаба и функцията за мащабиране, някои от свойствата на прозореца за изглед - или както сега се наричат "ръкохватки" - са променени.
увеличение
Дескрипторът за мащабиране е еквивалентът на първоначалния мащаб в мета тага. Освен минимален мащаб и максимален мащаб, има дескриптори за максимално увеличение и минимално увеличение:
@viewport (ширина: ширина на устройството; мащабиране: 2;)
потребителско увеличение
Дескрипторът за мащабиране на потребителя е еквивалентен на параметъра за мащабиране на потребителя
@viewport (ширина: ширина на устройството; потребителско увеличение: фиксирано;)
Поддръжка на браузър
От днес правилото @viewport css се поддържа само от Opera и IE10. Изглежда, че Chrome и други браузъри също ще го внедрят скоро. Очаква се скоро този мета таг да стане новият официален уеб стандарт.
Засега трябва да добавите префикс на доставчик към правилото @viewport:
@-ms-viewport (ширина: ширина на устройството;) @-o-viewport (ширина: ширина на устройство;) @viewport (ширина: ширина на устройство;)
Разбира се, все още трябва да включим мета тага на прозореца за изглед html страница, защото той няма да ходи никъде скоро. Но вече не е толкова страшно да гледаме в бъдещето – добавянето на правилото @viewport просто прави нашите сайтове и приложения удобни за бъдещето.