Мета таг за мобилни устройства. Мета таг Viewport, мащабиране на уеб страници в мобилни браузъри. meta viewport и неотзивчиви страници
Пълно описание на мета тага прозорец за изгледи неговите атрибути. Примери, бележки и препоръки за адаптиране на сайт за мобилни устройства. Както и допълнителни и полезни мета тагове: Удобен за ръце, Оптимизирано за мобилни устройстваи apple-mobile-web-app-capable.
- Мета таг на Viewport
- Атрибути на мета тагове на Viewport
- Допълнителни и полезни мета тагове
- Мета таг HandheldFriendly
- Мета таг MobileOptimized
- Мета таг apple-mobile-web-app-capable
- Препоръчителен набор от мета тагове
Мета таг на Viewport
Мета таг прозорец за изгледказва на браузъра точно как да обработва размерите на страниците и да ги мащабира. Този етикет трябва да бъде добавен към секцията head.
Забележка: мета таг гледкане е част от официален стандарт и е част от спецификацията Адаптиране на CSS устройство(http://goo.gl/FSTGbn). Но докато тази спецификация не бъде финализирана и широко възприета, се препоръчва използването на мета тага прозорец за изгледотделно и в комбинация със стилове @viewportза целите на съвместимостта.
Пример:
Атрибути на мета тагове на Viewport
Мета таг прозорец за изгледможе да има следните атрибути, разделени със запетаи (,):
ширина- ширина на зоната за гледане.
Стойността на атрибута е неотрицателно цяло число от 200 към 10000 пиксели или константа широчина на устройството, който задава ширината на страницата така, че да отговаря на размера на екрана.
Ако стойността не е посочена, по подразбиране е зададено - в мобилен Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.
Забележка: За сайтове с адаптивен дизайн е препоръчително да използвате: width=device-width .
височина- височина на зоната за наблюдение.
Стойността на атрибута е неотрицателно цяло число от 233 към 10000 пиксели или константа височина на устройството, който задава височината на страницата така, че да отговаря на размера на екрана.
Забележка: ако е посочен атрибут ширина, посочете атрибут височинане е необходимо.
начален мащаб- начален мащаб на страницата.
0.1 към 1.0 . Значение 1.0 определя мащаба 1:1 , т.е. "не мащабирай"
Забележка: на някои операционни системи (iOS, Windows Phone и др.)Ширината на страницата, когато се завърти, остава непроменена. Вместо да преразпределя съдържанието, то се мащабира. Затова се препоръчва да се използват: първоначална скала=1.0.
мащабируеми от потребителя- наличие на мащабиране на страницата от потребителя.
Стойността на атрибута е булева " да"(1) - може да се мащабира или " не"(0) - не може да се мащабира.
Забележка: Препоръчително е да използвате стойността " да“, и защото след това е инсталиран по подразбиране мащабируеми от потребителяможе да не е посочено.
минимален мащаб- минимален мащаб на зрителната площ.
Стойността на атрибута е число с точка от 0.1 към 1.0 . В мобилния браузър Safari стойността по подразбиране е 0,25. Значение 1.0 определя мащаба 1:1 , т.е. "не мащабирай"
максимална скала- максимален мащаб на прозореца за изглед.
Стойността на атрибута е число с точка от 0.1 към 1.0 . Мобилният браузър Safari по подразбиране е 1.6. Значение 1.0 определя мащаба 1:1 , т.е. "не мащабирай"
Забележка: избягвайте атрибути мащабируеми от потребителя, минимален мащаби максимална скала, защото имат отрицателно въздействие върху достъпността на съдържанието.
Допълнителни и полезни мета тагове
Мета таг Удобен за ръцеопределя дали дадена страница на сайта е оптимизирана за мобилни устройства на Palm и Blackberry, в браузър като AvantGo. Сега той се разпознава от много други мобилни браузъри.
Пример:
Мета таг Оптимизирано за мобилни устройства(http://goo.gl/ZpLjZz) задава ширината на зоната за гледане в мобилните браузъри IE Mobile или Pocket IE. Аналогичен е на атрибута ширинав мета тага прозорец за изглед.
Пример:
Мета таг apple-mobile-web-app-capable(http://goo.gl/VGDYQC) позволява на страницата да работи в режим на цял екран, подходящ за мобилни устройства на Apple.
Пример:
Наборът от мета тагове, които използвам за сайтове с адаптивен дизайн, пригодени за мобилни устройства:
Случи се така, че мобилните браузъри се появиха сравнително наскоро и по това време вече имаше огромен брой сайтове в Интернет. Естествено, всички тези сайтове изобщо не бяха оптимизирани за малките екрани на смартфони, а смартфоните от своя страна бяха принудени да вярват, че всички сайтове са с ширина някъде около 1000px (980px в Safari). Беше необходимо по някакъв начин да се реши настоящата ситуация и Apple излезе с мета таг , който според традицията след това беше откраднат от всички останали производители на браузъри.
Нека да разгледаме типично епично оформление на уебсайт:
html
здравей свят
Нека го отворим в мобилен браузър. Ето какво ще видим:
Както правилно отбелязахте, текстът е твърде малък и това се случи, защото Safari се опита да пасне на нашия сайт (който според предположението му е направен за браузъри с ширина на екрана около 980px)
Нека сега кажем на браузъра, че нашият сайт реагира на всяка ширина на екрана.
html
Какво се случи:
Е, сега всичко е много по-добре. Като посочихме width=device-width, казахме на браузъра, че искаме областта за гледане на съдържание да бъде равна на ширината на екрана на мобилното устройство.
Можете ръчно да зададете стойността за ширина. Например content="width=320px" , но това не е препоръчително, тъй като различните смартфони може да имат напълно различна ширина на екрана.
Много често срещан вариант е:
html
Тази опция задава ширината на страницата и първоначалния мащаб (в този случай без мащабиране)
Често се използва и следната опция:
html
Такива стойности се използват, ако сайтът ще се използва и функционира като мобилно приложение. Тези
- когато страницата се зареди, тя няма да се мащабира
- страницата ще заеме цялата ширина на мобилния браузър
- Всяко персонализирано мащабиране е забранено
- Налично е само хоризонтално и вертикално превъртане
Използвайте тази конфигурация само ако знаете какво правите.
Нека да разгледаме валидните параметри и техните стойности, налични в мета тага на viewport
ширина
Цяло число (от 200px - 10 000px) или „ширина на устройството“.
Задава ширината на прозореца за изглед. Ако прозорецът за изглед на nirina не е посочен, тогава:
- за мобилно Safari е 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
Както можете да видите, поддръжката все още не е завършена, но вече можете да използвате този маркер, защото... повечето нови смартфони вече го разбират.
И така, това завършва тази статия, благодаря ви за вниманието.
Сигурен съм, че много хора използват мета тага Viewport, за да мащабират своя дизайн, но знаете ли, че този таг може да бъде много полезен и за мобилни устройства? Ако нямате време да конвертирате проекта си, все пак трябва да прочетете тази статия за това как да използвате етикета Viewport, за да подобрите външния вид на вашия проект на мобилни устройства.
Основна употреба на етикета Viewport
Мета тагът Viewport обикновено се използва за мащабиране на дизайна, за да зададете ширината и височината на прозореца на мобилни устройства. По-долу е даден пример за таг Viewport.
< meta name = "viewport" content = "width=device-width, initial-scale=1.0"> |
Използване на етикета Viewport за сайтове, които не са предназначени за мобилни устройства.
Както знаете, ширината на прозореца по подразбиране на iPhone е 980px. Но вашият дизайн може да не се вписва в този диапазон. Може да е по-широк или по-тесен. По-долу са дадени два примера, където можете да използвате тези маркери, за да подобрите показването на вашия сайт на мобилни устройства.
Пример
Екранната снимка вляво показва как ще изглежда сайтът без етикета. Както можете да видите, страницата докосва двете страни. Уеб администраторът добави таг Viewport, за да зададе ширината на прозореца на 1024px, така че оставя малко допълнително пространство от лявата и дясната страна.
< meta name = "viewport" content = "width=1024" > |
Още един пример.
Ако вашият проект е твърде тесен, това също може да създаде проблеми. Да приемем, че ширината на вашия дизайнерски контейнер е 700px и това не е правилно, ще изглежда като екранната снимка отляво, където има голямо празно пространство отдясно.
Можете просто да коригирате това, като зададете ширината на прозореца на 720px. Ширината на вашия дизайн не се променя, но iPhone ще се мащабира, за да се побере на 720px.
< meta name = "viewport" content = "width=720" > |
Често срещана грешка
Често срещана грешка е, че хората често добавят начален - мащаб = 1за дизайни извън размера. Това изобразява страницата в 100% мащаб без мащабиране. Ако вашият проект не се побира на екрана, потребителите ще трябва да намалят мащаба, за да видят цялата страница. Още по-лошо е, когато се комбинират потребител - мащабируем = неили максимум - мащаб = 1с начален - мащаб = 1. Това ще деактивира опцията за мащабиране. Потребителите нямат възможност да намалят размера на страницата, за да я видят.
Мета тагът на прозореца за изглед е отговорен за зоната за гледане на сайта на екрана. Просто казано, това е настройка на ширината на екрана за сайта. Например, уебсайт ще изглежда правилно на компютърен монитор, но на смартфон ще бъде труден за четене, т.к шрифтът е твърде малък.
За да се реши проблемът с показването на сайта на малки резолюции на браузъра, беше изобретено ново направление - адаптивно оформление на сайта, с цел да направи сайта удобен за потребители с различна ширина на браузъра.
Мета тагът на прозореца за изглед ви позволява да регулирате ширината на прозореца за изглед и мащаба на страницата. По дефиниция прозорецът за изглед е областта на сайта, видима за потребителя без превъртане.
синтаксис на прозореца за изглед... ...
По-горе бяха посочени само два атрибута: width и initial-scale, които отговарят съответно за ширината и мащаба. Можете също така да посочите други параметри, разделени със запетаи. Нека разгледаме всички възможни атрибути.
- ширина - задава ширината на прозореца на браузъра. Приема цяло число (от 200 до 10 000) в пиксели или ширина на устройството. Този атрибут е необходим за адаптивни оформления на уебсайтове.
- височина - задава височината на прозореца на браузъра. Приема цяло число в пиксели (от 200 до 10 000) или стойност на височината на устройството. Тъй като определящият фактор е ширината, не е необходимо да се указва височината за адаптивно оформление.
- initial-scale - коефициент на мащабиране. Приема реални стойности (от 0,1 до 10,0). Стойността по подразбиране е "1.0", което означава, че всеки физически пиксел съответства на хардуерен пиксел.
- user-scalable - задава дали потребителят може да мащабира страницата. Приема две стойности: не/да
- minimum-scale - задава минималния мащаб. Измерено в реални числа.
- max-scale - задава минималния мащаб. Измерено в реални числа.
Примери за Viewport
Как са свързани физическите и хардуерните пиксели?
Новите смартфони имат висока резолюция. В тази връзка е необходимо да се изясни атрибутът първоначален мащаб, който отговаря за мащабирането. Факт е, че като направим мащаба 1.0, ще постигнем твърде малък текст, който ще бъде невъзможен за четене. Следователно следната таблица се прилага при преобразуване на мащаба за устройства с висока плътност на пикселите.