Fiecare browser are propria ștampilăDatorită acestui fapt, pe site-ul nostru vom putea identifica de unde provine o cerere și din ce browser a fost făcută, așa cum știm bine, browserul Internet Explorer a adus întotdeauna dureri de cap dezvoltatorilor de web (deși în ultimii ani a avut îmbunătățit), pentru Vă vom putea identifica și arăta reguli alternative pentru a rezolva aceste mici probleme.
Pentru că ne slujești?Imaginați-vă că avem un site web precum Facebook, unde milioane de oameni intră în fiecare zi, totuși nu toți o fac de la același tip de dispozitive, există oameni care intră de pe computerul desktop, alții de pe tabletă, alții de pe mobil, etc. Fiecare dispozitiv are un browser (sau mai multe) și are un agent, dacă îl putem identifica, atunci putem difuza conținutul într-un mod adecvat, deoarece afișajul nu este același pentru toată lumea, fiecare dispozitiv va fi văzut într-un mod, și fiecare browser poate interpreta regulile într-un mod diferit (deși acest lucru este din ce în ce mai mic).
Am discutat că fiecare browser are un agent care ne permite să îl identificăm, mai jos este un rezumat Cod JavaScript pentru a obține agentul browserului unde este folosit:
Obțineți agent de utilizatorCodul scriptului a fost încorporat în HTML pentru comoditate. Dacă deschidem codul anterior în browserul Google Chrome, vom vedea următoarele:
MARI
Și dacă o facem acum în Internet Explorer:
MARI
Ați verificat că a fost deschis din Windows pentru a face cele 2 capturi anterioare, dacă îl deschidem din Mozilla Firefox în Linux, vom vedea următoarele:
Dacă doriți un cod într-o limbă pentru server, mai jos este un cod de văzut cum să obțineți agentul în PHP, nu uitați că JavaScript este posibil ca utilizatorul să îl dezactiveze:
Acum vom trece la ceea ce ne interesează cel mai mult, pentru aceasta vom începe prin a analiza un exemplu din ceea ce am discutat până acum cu pagina noastră: Solvetic.
Verificarea Solvetic
Dacă intrăm în Solvetic de pe computerul nostru, utilizând browserul Google Chrome vom vedea următorul aspect, complet, dintr-o privire vom vedea totul larg, zonă pentru conectare și înregistrare:
Dar dacă intrăm de pe Google Chrome pe un mobil Android, nu tot conținutul intră pe ecran, desigur, este ceva de care trebuie să se țină cont, nu este foarte plăcut să trebuiască să glisați degetul pentru a vedea părțile ecran (câteva site-uri sunt așa în zilele noastre, din fericire), mai jos las imaginea de cum arată Solvetic pe mobil:
După cum putem vedea, se adaptează la ecran, acum avem meniurile în partea de sus, dacă facem clic pe partea stângă (cele 3 bare) vom vedea opțiunile pentru a merge la articole, tutoriale etc.
Și dacă facem clic pe pictograma din dreapta (aspect al butonului on / off) avem opțiunile de autentificare sau înregistrare.
Acum vom vedea o modalitate de a obține o pagină care să fie difuzată, în funcție de dispozitivul care ne vizitează.
Cum se obține rezultatul?
Există mai multe modalități de a obține acest rezultat, există scripturi care sunt plasate direct în aplicație sau avem, de asemenea, cadre precum Bootstrap, dar putem obține și un rezultat similar de la Nginx, deoarece recunoscând agentul browserului putem face o rescriere și trimiteți utilizatorului către o altă parte a aplicației fără a schimba adresa URL pe care o vede.
Dacă doriți să cunoașteți Nginx, lăsăm un link mai jos, de unde îl puteți descărca și:
Pentru a realiza acest lucru, trebuie mai întâi să identificăm agentul browserului, dacă este unul dintre cei pe care dorim să introducem regula, folosim un condițional simplu și îi aplicăm regula, facem toate acestea în blocul nostru de locație.
Să vedem următorul exemplu de cod pentru a realiza acest lucru, puteți vedea cât de scurt este:
location / {if ($ http_user_agent ~ * '(iPhone | iPod)') {rescrie ^. + http://m.example.com/$uri; }}}După cum vedem în cod, identificăm agentul browserului, dacă acesta corespunde celui pe care l-am desemnat (în acest caz iPhone sau iPod) facem o rescriere, aceasta se poate face la fel de largă sau specifică pe care logica noastră o cere, pentru exemplu este mai ușor de înțeles cu o singură condiție.
După cum putem vedea, este destul de ușor să identificăm agentul browserului și este chiar mai ușor să folosim acest lucru în favoarea noastră, așa cum am menționat anterior, trebuie să avem o idee clară despre ceea ce vrem să facem pentru a utiliza instrumente și obțineți beneficiul dorit.
Pentru a încheia tutorialul, comentează că folosind un design receptiv, vei realiza că aspectul paginii tale web se adaptează la ecranul dispozitivelor fără alte complicații.
