Всеки браузър има свой собствен печатБлагодарение на това на нашия сайт ще можем да идентифицираме откъде идва заявка и от кой браузър е направена, както добре знаем, браузърът Internet Explorer винаги е причинявал главоболия на уеб разработчиците (въпреки че в последно време подобрено), защото Ние ще можем да Ви идентифицираме и да покажем алтернативни правила за решаване на тези малки проблеми.
За това, че ни обслужваш?Представете си, че имаме уебсайт като Facebook, където милиони хора влизат всеки ден, но не всички го правят от един и същ тип устройства, има хора, които влизат от настолния си компютър, други от таблет, трети от мобилния си телефон, и т.н. Всяко устройство има браузър (или няколко) и има агент, ако можем да го идентифицираме, тогава можем да обслужваме съдържанието по подходящ начин, тъй като дисплеят не е еднакъв за всички, всяко устройство ще се вижда по един начин, и всеки браузър може да тълкува правилата по различен начин (въпреки че това става все по -ниско).
Обсъждахме, че всеки браузър има агент, който ни позволява да го идентифицираме, по -долу е кратко JavaScript код, за да получите агента на браузъра където се използва:
Вземете потребителски агентСкриптовият код е вграден в HTML за удобство. Ако отворим предишния код в браузъра Google Chrome, виждаме следното:
Увеличете
И ако сега го направим в Internet Explorer:
Увеличете
Проверихте, че е отворен от Windows, за да вземе 2 -те предишни снимки, ако го отворим от Mozilla Firefox в Linux, виждаме следното:
Ако искате код на език за сървъра, по -долу е код, който да видите как да получите агента в PHP, не забравяйте, че JavaScript е възможно потребителят да го деактивира:
Сега ще преминем към това, което ни интересува най -много, за това ще започнем, като разгледаме пример за това, което обсъждахме досега с нашата страница: Solvetic.
Проверка на Solvetic
Ако влезем в Solvetic от нашия компютър, използвайки браузъра Google Chrome, ще видим следния аспект, завършен, с един поглед виждаме всичко широко, зона за влизане и регистрация:
Но ако влизаме от Google Chrome на мобилен телефон с Android, разбира се, не цялото съдържание влиза на екрана, това е нещо, което трябва да се вземе предвид, не е много приятно да се налага да плъзгате пръста си, за да видите частите на екран (за щастие няколко сайта са такива в днешно време), по -долу оставям образа на това как изглежда Solvetic на мобилни устройства:
Както виждаме, той се адаптира към екрана, сега имаме менютата в горната част, ако щракнем от лявата страна (3 -те ленти) ще видим опциите за преминаване към статиите, уроци и т.н.
И ако щракнем върху иконата вдясно (аспект на бутона за включване / изключване), имаме опции за вход или регистрация.
Сега ще видим начин да се покаже страница, в зависимост от устройството, което ни посещава.
Как да постигнем резултата?
Има няколко начина за постигане на този резултат, има скриптове, които се поставят директно в приложението или също имаме рамки като Bootstrap, но също така можем да постигнем подобен резултат от Nginx, тъй като чрез разпознаване на агента на браузъра можем да направим пренаписване и изпраща на потребителя до друга част от приложението, без да променя URL адреса, който вижда.
Ако искате да знаете Nginx, оставяме връзка по -долу, където можете също да го изтеглите:
За да постигнем това, първо трябва да идентифицираме агента на браузъра, ако е един от тези, които искаме да въведем правилото, използваме просто условно условие и прилагаме правилото към него, ние правим всичко това в нашия блок за местоположение.
Нека разгледаме следния примерен код, за да постигнем това, можете да видите колко е кратък:
местоположение/{if ($ http_user_agent ~ * '(iPhone | iPod)') {пренапишете ^. + http://m.example.com/$uri; }}}Както виждаме в кода, ние идентифицираме агента на браузъра, ако той съответства на този, който сме определили (в този случай iPhone или iPod) правим пренаписване, това може да бъде направено толкова широко или конкретно, колкото изисква нашата логика, за пример е по -лесно да се разбере само с едно условие.
Както виждаме, е доста лесно да се идентифицира браузърният агент и е още по -лесно да се използва това в наша полза, както споменахме преди, трябва да имаме ясна представа какво искаме да направим, за да използваме инструменти и да получите желаната полза.
За да завършите урока, коментирайте, че с помощта на отзивчив дизайн ще постигнете, че външният вид на вашата уеб страница се адаптира към екрана на устройствата без допълнителни усложнения.
