Varje webbläsare har sin egen stämpelTack vare detta kommer vi på vår webbplats att kunna identifiera varifrån en begäran kommer och från vilken webbläsare den har gjorts, som vi väl vet har Internet Explorer -webbläsaren alltid medfört huvudvärk för webbutvecklare (även om den på senare tid har förbättrad), för Vi kommer att kunna identifiera dig och visa alternativa regler för att lösa dessa små problem.
För att tjäna oss?Tänk att vi har en webbplats som Facebook, där miljontals människor går in varje dag, men inte alla gör det från samma typ av enheter, det finns människor som går in från sin stationära dator, andra från en surfplatta, andra från sin mobil, etc. Varje enhet har en webbläsare (eller flera) och den har en agent, om vi kan identifiera den kan vi betjäna innehållet på ett lämpligt sätt, eftersom displayen inte är densamma för alla, kommer varje enhet att ses på ett sätt, och varje webbläsare kan tolka regler på ett annat sätt (även om detta blir lägre och lägre).
Vi har diskuterat att varje webbläsare har en agent som gör att vi kan identifiera den, nedan är en kortfattad beskrivning JavaScript -kod för att få webbläsaragenten där det används:
Skaffa user-agentSkriptkoden har för enkelhets skull bäddats in i HTML -koden. Om vi öppnar den tidigare koden i webbläsaren Google Chrome ser vi följande:
FÖRSTORA
Och om vi nu gör det i Internet Explorer:
FÖRSTORA
Du har verifierat att det öppnades från Windows för att ta de två föregående tagningarna, om vi öppnar det från Mozilla Firefox i Linux ser vi följande:
Om du vill ha en kod på ett språk för servern, nedan är en kod att se hur man får agenten i PHP, kom ihåg att JavaScript är möjligt för användaren att inaktivera det:
Vi ska nu gå vidare till det som intresserar oss mest, för detta börjar vi med att titta på ett exempel på vad vi hittills har diskuterat med vår sida: Solvetic.
Kontrollerar Solvetic
Om vi går in på Solvetic från vår dator, med hjälp av Google Chrome -webbläsaren kommer vi att se följande aspekt, komplett, med en blick ser vi allt bredt, område att logga in och registrera:
Men om vi går in från Google Chrome på en Android -mobil, kommer inte allt innehåll naturligtvis in på skärmen, det är något som måste beaktas, det är inte särskilt trevligt att behöva glida fingret för att se delarna av skärm (få platser är så här nuförtiden, lyckligtvis), nedanför lämnar jag bilden av hur Solvetic ser ut på mobilen:
Som vi kan se anpassar den sig till skärmen, nu har vi menyerna högst upp, om vi klickar på vänster sida (de 3 staplarna) kommer vi att se alternativen för att gå till artiklarna, självstudier etc.
Och om vi klickar på ikonen till höger (aspekt av på / av -knappen) har vi alternativen för att logga in eller registrera dig.
Nu ska vi se ett sätt att få en sida att serveras, beroende på vilken enhet som besöker oss.
Hur uppnår man resultatet?
Det finns flera sätt att uppnå detta resultat, det finns skript som placeras direkt i programmet eller så har vi också ramar som Bootstrap, men vi kan också uppnå ett liknande resultat från Nginx, eftersom vi genom att känna igen webbläsaragenten kan göra en omskrivning och skicka till användaren till en annan del av applikationen utan att ändra webbadressen som han ser.
Om du vill veta Nginx lämnar vi en länk nedan, där du också kan ladda ner den:
För att uppnå detta måste vi först identifiera webbläsaragenten, om det är en av dem som vi vill ange regeln använder vi en enkel villkorlig och tillämpar regeln på den, vi gör allt detta i vårt platsblock.
Låt oss titta på följande exempelkod för att uppnå detta, du kan se hur kort den är:
location/{if ($ http_user_agent ~ * '(iPhone | iPod)') {skriva om ^. + http://m.example.com/$uri; }}}Som vi ser i koden identifierar vi webbläsaragenten, om den motsvarar den vi har utsett (i det här fallet iPhone eller iPod) gör vi en omskrivning, detta kan göras så brett eller specifikt som vår logik kräver, för exempel är det lättare att förstå med bara ett villkor.
Som vi kan se är det ganska enkelt att identifiera webbläsaragenten och det är ännu lättare att använda detta till vår fördel, som vi har nämnt tidigare måste vi ha en klar uppfattning om vad vi vill göra för att kunna använda verktyg och få önskad fördel.
För att avsluta självstudien, kommentera att med responsiv design kommer du att uppnå att utseendet på din webbsida anpassar sig till enhetens skärm utan ytterligare komplikationer.
