Elke browser heeft zijn eigen stempelHierdoor zullen we op onze site kunnen identificeren waar een verzoek vandaan komt en van welke browser het is gedaan, zoals we goed weten, heeft de Internet Explorer-browser altijd hoofdpijn bezorgd aan webontwikkelaars (hoewel het de laatste tijd verbeterd), want we zullen u kunnen identificeren en alternatieve regels kunnen tonen om deze kleine problemen op te lossen.
Om ons te dienen?Stel je voor dat we een website hebben zoals Facebook, waar miljoenen mensen elke dag binnenkomen, maar niet allemaal vanaf hetzelfde type apparaten, er zijn mensen die vanaf hun desktop-pc binnenkomen, anderen vanaf een tablet, anderen vanaf hun mobiel, enz. Elk apparaat heeft een browser (of meerdere) en het heeft een agent, als we het kunnen identificeren, kunnen we de inhoud op een geschikte manier aanbieden, aangezien de weergave niet voor iedereen hetzelfde is, zal elk apparaat op één manier worden gezien, en elke browser kan regels op een andere manier interpreteren (hoewel dit steeds lager en lager wordt).
We hebben besproken dat elke browser een agent heeft waarmee we deze kunnen identificeren, hieronder volgt een korte: JavaScript-code om de browseragent te krijgen waar het wordt gebruikt:
Gebruiker-agent ophalenDe scriptcode is voor het gemak in de HTML ingesloten. Als we de vorige code openen in de Google Chrome browser zien we het volgende:
VERGROTEN
En als we het nu in Internet Explorer doen:
VERGROTEN
Je hebt geverifieerd dat het vanuit Windows is geopend om de 2 vorige opnames te maken, als we het openen vanuit Mozilla Firefox in Linux, zien we het volgende:
Als u een code in een taal voor de server wilt, vindt u hieronder een code om te zien hoe de agent in PHP te krijgen, onthoud dat de gebruiker JavaScript kan uitschakelen:
We gaan nu verder met wat ons het meest interesseert, hiervoor zullen we beginnen met een voorbeeld te bekijken van wat we tot nu toe hebben besproken met onze pagina: Solvetic.
Solvetic controleren
Als we Solvetic vanaf onze pc invoeren, zullen we met behulp van de Google Chrome-browser het volgende aspect zien, compleet, in één oogopslag zien we alles breed, gebied om in te loggen en te registreren:
Maar als we vanuit Google Chrome op een Android-mobiel binnenkomen, komt natuurlijk niet alle inhoud op het scherm, daar moet rekening mee worden gehouden, het is niet erg prettig om met je vinger te moeten schuiven om de delen van de scherm (gelukkig zijn maar weinig sites tegenwoordig zo), hieronder laat ik het beeld achter van hoe Solvetic eruitziet op mobiel:
Zoals we kunnen zien, past het zich aan het scherm aan, nu hebben we de menu's bovenaan, als we aan de linkerkant klikken (de 3 balken), zien we de opties om naar de artikelen, tutorials, enz.
En als we op het icoontje rechts klikken (aspect van de aan/uit knop) hebben we de opties om in te loggen of te registreren.
Nu gaan we een manier zien om een pagina te laten zien, afhankelijk van het apparaat dat ons bezoekt.
Hoe het resultaat te bereiken?
Er zijn verschillende manieren om dit resultaat te bereiken, er zijn scripts die direct in de applicatie worden geplaatst of we hebben ook frameworks zoals Bootstrap, maar we kunnen ook een vergelijkbaar resultaat bereiken met Nginx, omdat we door de browseragent te herkennen een herschrijving kunnen doen en naar de gebruiker naar een ander deel van de applicatie sturen zonder de URL die hij ziet te wijzigen.
Als je Nginx wilt leren kennen, laten we hieronder een link achter, waar je deze ook kunt downloaden:
Om dit te bereiken, moeten we eerst de browseragent identificeren, als het een van die is die we in de regel willen invoeren, gebruiken we een eenvoudige voorwaardelijke en passen we de regel daarop toe, we doen dit allemaal in ons locatieblok.
Laten we eens kijken naar de volgende voorbeeldcode om dit te bereiken, u kunt zien hoe kort deze is:
locatie / {if ($ http_user_agent ~ * '(iPhone | iPod)') {herschrijven ^. + http://m.example.com/$uri; }}}Zoals we in de code zien, identificeren we de browseragent, als deze overeenkomt met degene die we hebben aangewezen (in dit geval iPhone of iPod), doen we een herschrijving, dit kan zo breed of specifiek worden gedaan als onze logica vereist, voor de het is bijvoorbeeld gemakkelijker te begrijpen met slechts één voorwaarde.
Zoals we kunnen zien, is het vrij eenvoudig om de browseragent te identificeren en het is nog gemakkelijker om dit in ons voordeel te gebruiken, zoals we eerder hebben vermeld, moeten we een duidelijk idee hebben van wat we willen doen om de tools en krijg het gewenste voordeel.
Om de zelfstudie af te sluiten, kunt u zeggen dat u met responsief ontwerp zult bereiken dat het uiterlijk van uw webpagina zich zonder verdere complicaties aanpast aan het scherm van de apparaten.
