Сваки прегледач има свој печатЗахваљујући томе, на нашој веб локацији моћи ћемо да идентификујемо одакле захтев потиче и из ког претраживача је направљен, као што добро знамо, претраживач Интернет Екплорер је увек доносио главобоље веб програмерима (иако је у последње време побољшано), јер ћемо вас моћи идентификовати и показати алтернативна правила за решавање ових малих проблема.
За нас?Замислите да имамо веб страницу попут Фацебоока, на коју свакодневно улазе милиони људи, али не сви то раде са исте врсте уређаја, постоје људи који улазе са стоног рачунара, други са таблета, трећи са мобилног телефона, итд. Сваки уређај има прегледач (или више њих) и има агента, ако га можемо идентификовати, онда можемо послужити садржај на одговарајући начин, јер приказ није исти за све, сваки уређај ће се видети на један начин, и сваки прегледач може тумачити правила на другачији начин (иако је то све ниже).
Разговарали смо о томе да сваки прегледач има агента који нам омогућава да га идентификујемо, доле је кратак ЈаваСцрипт код за добијање агента прегледача где се користи:
Набавите корисничког агентаКод скрипте је уграђен у ХТМЛ ради практичности. Ако отворимо претходни код у прегледачу Гоогле Цхроме, видећемо следеће:
ЕНЛАРГЕ
А ако то сада урадимо у Интернет Екплореру:
ЕНЛАРГЕ
Потврдили сте да је отворен из Виндовса ради снимања 2 претходна снимка, ако га отворимо из Мозилла Фирефока у Линуку, видимо следеће:
Ако желите код на језику за сервер, испод је код који треба видети како добити агента у ПХП -у, запамтите да је кориснику ЈаваСцрипт онемогућен:
Сада ћемо прећи на оно што нас највише занима, за ово ћемо почети тако што ћемо погледати пример онога о чему смо до сада разговарали са нашом страницом: Солветиц.
Провера Солветиц
Ако уђемо у Солветиц са свог рачунара, помоћу прегледача Гоогле Цхроме видећемо следећи аспект, комплетан, на први поглед видимо све широко, подручје за пријављивање и регистрацију:
Али ако уђемо из Гоогле Цхроме -а на Андроид мобилном уређају, наравно, сав садржај не излази на екран, то је нешто што се мора узети у обзир, није баш пријатно клизити прстом да бисте видели делове екран (данас је на срећу неколико оваквих веб локација), испод остављам слику о томе како Солветиц изгледа на мобилним уређајима:
Као што видимо, прилагођава се екрану, сада имамо меније на врху, ако кликнемо на леву страну (3 траке) видећемо опције за одлазак на чланке, водиче итд.
А ако кликнемо на икону са десне стране (аспект дугмета за укључивање / искључивање), имамо могућности да се пријавимо или региструјемо.
Сада ћемо видети начин да се страница послужи, у зависности од уређаја који нас посећује.
Како постићи резултат?
Постоји неколико начина за постизање овог резултата, постоје скрипте које се постављају директно у апликацију или имамо и оквире као што је Боотстрап, али сличан резултат можемо постићи и из Нгинка, јер препознавањем агента претраживача можемо да препишемо и послати кориснику у други део апликације без промене УРЛ -а који види.
Ако желите да знате Нгинк, остављамо везу испод, где га такође можете преузети:
Да бисмо то постигли, прво морамо идентификовати агента претраживача, ако је један од оних за које желимо да унесемо правило, користимо једноставан услов и на њега применимо правило, све то радимо у нашем блоку локација.
Погледајмо следећи пример кода да бисмо то постигли, можете видети колико је кратак:
локација/{иф ($ хттп_усер_агент ~ * '(иПхоне | иПод)') {препиши ^. + хттп://м.екампле.цом/$ури; }}}Као што видимо у коду, идентификујемо агента претраживача, ако одговара оном који смо одредили (у овом случају иПхоне или иПод), преправљамо, то се може урадити онолико широко или специфично колико то захтева наша логика, за пример је лакше разумети само са једним условом.
Као што видимо, прилично је лако идентификовати агента претраживача, а још је лакше користити ово у своју корист, као што смо већ поменули, морамо имати јасну идеју шта желимо да учинимо да бисмо могли да користимо алате и остварите жељену корист.
За крај водича, коментирајте да ћете помоћу респонзивног дизајна постићи да се изглед ваше веб странице прилагоди екрану уређаја без додатних компликација.