Slik bruker du omskrivningsdirektiv fra Nginx -modulen

Hver nettleser har sitt eget stempelTakket være dette vil vi på nettstedet vårt kunne identifisere hvor en forespørsel kommer fra og fra hvilken nettleser den er laget, som vi godt vet har nettleseren Internet Explorer alltid brakt hodepine til webutviklere (selv om den i nyere tid har forbedret), for Vi vil kunne identifisere deg og vise alternative regler for å løse disse små problemene.

For å tjene oss?Tenk at vi har et nettsted som Facebook, der millioner av mennesker kommer inn hver dag, men ikke alle gjør det fra samme type enheter, det er folk som kommer inn fra sin stasjonære PC, andre fra et nettbrett, andre fra mobilen, etc. Hver enhet har en nettleser (eller flere) og den har en agent. Hvis vi kan identifisere den, kan vi betjene innholdet på en passende måte, siden visningen ikke er den samme for alle, vil hver enhet bli sett på en måte, og hver nettleser kan tolke regler på en annen måte (selv om dette blir lavere og lavere).

Vi har diskutert at hver nettleser har en agent som lar oss identifisere den. Nedenfor er en kortfattet beskrivelse JavaScript -kode for å få nettleseragenten hvor det brukes:

 Få bruker-agent 

Skriptkoden er for enkelhets skyld innebygd i HTML -koden. Hvis vi åpner den forrige koden i Google Chrome -nettleseren, ser vi følgende:

FORSTØRRE

Og hvis vi nå gjør det i Internet Explorer:

FORSTØRRE

Du har bekreftet at den ble åpnet fra Windows for å ta de to tidligere fangstene, hvis vi åpner den fra Mozilla Firefox i Linux ser vi følgende:

Hvis du vil ha en kode på et språk for serveren, er det en kode nedenfor hvordan få agenten i PHP, husk at JavaScript er mulig for brukeren å deaktivere det:

Vi skal nå gå videre til det som interesserer oss mest, for dette starter vi med å se på et eksempel på det vi har diskutert så langt med siden vår: Solvetic.

Sjekker Solvetic

Hvis vi går inn på Solvetic fra PC -en vår, ved hjelp av Google Chrome -nettleseren vil vi se følgende aspekt, komplett, med et øyeblikk ser vi alt bredt, område for å logge inn og registrere:

Men hvis vi går inn fra Google Chrome på en Android -mobil, kommer ikke alt innholdet selvfølgelig inn på skjermen, det er noe som må tas i betraktning, det er ikke veldig hyggelig å måtte skyve fingeren for å se delene av skjermen (få nettsteder er slik i dag, heldigvis), nedenfor lar jeg bildet av hvordan Solvetic ser ut på mobilen:

Som vi kan se, tilpasser den seg skjermen, nå har vi menyene øverst, hvis vi klikker på venstre side (de 3 stolpene) vil vi se alternativene for å gå til artikler, opplæringsprogrammer, etc.

Og hvis vi klikker på ikonet til høyre (aspektet av av / på -knappen) har vi mulighetene for å logge inn eller registrere deg.

Nå skal vi se en måte å få en side til å bli vist, avhengig av enheten som besøker oss.

Hvordan oppnå resultatet?

Det er flere måter å oppnå dette resultatet på, det er skript som er plassert direkte i applikasjonen, eller vi har også rammer som Bootstrap, men vi kan også oppnå et lignende resultat fra Nginx, siden ved å gjenkjenne nettleseragenten kan vi skrive om og sende til brukeren til en annen del av applikasjonen uten å endre nettadressen han ser.

Hvis du vil vite Nginx, legger vi igjen en lenke nedenfor, hvor du også kan laste den ned:

For å oppnå dette må vi først identifisere nettleseragenten, hvis det er en av dem vi vil angi regelen, bruker vi en enkel betinget og bruker regelen på den, vi gjør alt dette i posisjonsblokken vår.

La oss se på følgende eksempelkode for å oppnå dette, du kan se hvor kort den er:

 location/{if ($ http_user_agent ~ * '(iPhone | iPod)') {rewrite ^. + http://m.example.com/$uri; }}}

Som vi ser i koden, identifiserer vi nettleseragenten, hvis den tilsvarer den vi har utpekt (i dette tilfellet iPhone eller iPod) gjør vi en omskrivning, dette kan gjøres så bredt eller spesifikt som logikken vår krever, for eksempel er det lettere å forstå med bare én betingelse.

Som vi kan se, er det ganske enkelt å identifisere nettleseragenten, og det er enda lettere å bruke dette til vår fordel, som vi har nevnt før, må vi ha en klar ide om hva vi vil gjøre for å bruke verktøy og få ønsket fordel.

For å avslutte opplæringen, kommenter at ved å bruke responsiv design vil du oppnå at utseendet på nettsiden din tilpasser seg enhetens skjerm uten ytterligere komplikasjoner.