Hver browser har sit eget stempelTakket være dette vil vi på vores websted kunne identificere, hvor en anmodning kommer fra, og fra hvilken browser den er lavet, som vi godt ved, har Internet Explorer -browseren altid bragt hovedpine til webudviklere (selvom den i nyere tid har forbedret), for Vi vil være i stand til at identificere dig og vise alternative regler for at løse disse små problemer.
For at tjene os?Forestil dig, at vi har et websted som Facebook, hvor millioner af mennesker kommer ind hver dag, men ikke alle gør det fra den samme type enheder, der er mennesker, der kommer ind fra deres stationære pc, andre fra en tablet, andre fra deres mobil, etc. Hver enhed har en browser (eller flere), og den har en agent.Hvis vi kan identificere den, kan vi betjene indholdet på en passende måde, da displayet ikke er det samme for alle, vil hver enhed blive set på en måde, og hver browser kan fortolke regler på en anden måde (selvom dette bliver lavere og lavere).
Vi har diskuteret, at hver browser har en agent, der giver os mulighed for at identificere den, herunder er en kortfattet beskrivelse JavaScript -kode for at hente browseragenten hvor det bruges:
Få bruger-agentScriptkoden er for nemheds skyld blevet integreret i HTML -koden. Hvis vi åbner den tidligere kode i Google Chrome -browseren, ser vi følgende:
FORSTØRRE
Og hvis vi nu gør det i Internet Explorer:
FORSTØRRE
Du har verificeret, at det blev åbnet fra Windows for at tage de 2 tidligere optagelser, hvis vi åbner det fra Mozilla Firefox i Linux ser vi følgende:
Hvis du vil have en kode på et sprog til serveren, er der en kode herunder hvordan man får agenten i PHP, husk at JavaScript er muligt for brugeren at deaktivere det:
Vi skal nu gå videre til det, der interesserer os mest, for dette vil vi starte med at se på et eksempel på, hvad vi hidtil har diskuteret med vores side: Solvetic.
Kontrollerer Solvetic
Hvis vi indtaster Solvetic fra vores pc, ved hjælp af Google Chrome -browseren vil vi se følgende aspekt, komplet, med et blik ser vi alt bredt, område til at logge ind og registrere:
Men hvis vi kommer ind fra Google Chrome på en Android -mobil, kommer ikke alt indhold naturligvis ind på skærmen, det er noget, der skal tages i betragtning, det er ikke særlig behageligt at skulle glide fingeren for at se delene af skærm (få steder er sådan i dag, heldigvis), herunder efterlader jeg billedet af, hvordan Solvetic ser ud på mobilen:
Som vi kan se, tilpasser den sig til skærmen, nu har vi menuerne øverst, hvis vi klikker på venstre side (de 3 søjler) vil vi se mulighederne for at gå til artiklerne, selvstudier osv.
Og hvis vi klikker på ikonet til højre (aspekt af tænd / sluk -knappen) har vi mulighederne for at logge ind eller registrere.
Nu skal vi se en måde at få en side til at blive vist, afhængigt af den enhed, der besøger os.
Hvordan opnås resultatet?
Der er flere måder at opnå dette resultat, der er scripts, der placeres direkte i applikationen, eller vi har også rammer som Bootstrap, men vi kan også opnå et lignende resultat fra Nginx, da vi ved at genkende browseragenten kan lave en omskrivning og sende til brugeren til en anden del af applikationen uden at ændre den URL, han ser.
Hvis du vil kende Nginx, efterlader vi et link herunder, hvor du også kan downloade det:
For at opnå dette skal vi først identificere browseragenten, hvis det er en af dem, vi vil indtaste reglen, bruger vi en simpel betinget og anvender reglen på den, vi gør alt dette i vores placeringsblok.
Lad os se på følgende eksempelkode for at opnå dette, du kan se, hvor kort den er:
placering/{if ($ http_user_agent ~ * '(iPhone | iPod)') {omskriv ^. + http://m.example.com/$uri; }}}Som vi ser i koden, identificerer vi browseragenten, hvis den svarer til den, vi har udpeget (i dette tilfælde iPhone eller iPod) laver vi en omskrivning, dette kan gøres så bredt eller specifikt, som vores logik kræver, for eksempel er det lettere at forstå med kun én betingelse.
Som vi kan se, er det ret let at identificere browseragenten, og det er endnu lettere at bruge dette til vores fordel, som vi har nævnt før, skal vi have en klar idé om, hvad vi vil gøre for at bruge værktøjer og få den ønskede fordel.
For at afslutte øvelsen skal du kommentere, at du ved hjælp af responsivt design vil opnå, at udseendet af din webside tilpasser sig enhedens skærm uden yderligere komplikationer.
