Jeder Browser hat seinen eigenen StempelDadurch können wir auf unserer Website erkennen, woher eine Anfrage stammt und von welchem Browser sie stammt verbessert), denn Wir können Sie identifizieren und alternative Regeln aufzeigen, um diese kleinen Probleme zu lösen.
Um uns zu dienen?Stellen Sie sich vor, wir haben eine Website wie Facebook, auf der jeden Tag Millionen von Menschen zugreifen, aber nicht alle tun dies von der gleichen Art von Geräten. etc. Jedes Gerät verfügt über einen Browser (oder mehrere) und einen Agenten. Wenn wir ihn identifizieren können, können wir den Inhalt auf geeignete Weise bereitstellen, da die Anzeige nicht für alle gleich ist, wird jedes Gerät auf eine Weise angezeigt. und jeder Browser kann Regeln anders interpretieren (obwohl dies immer niedriger wird).
Wir haben besprochen, dass jeder Browser über einen Agenten verfügt, der es uns ermöglicht, ihn zu identifizieren. Nachfolgend finden Sie eine kurze Beschreibung JavaScript-Code zum Abrufen des Browser-Agenten wo es verwendet wird:
User-Agent holenDer Skriptcode wurde der Einfachheit halber in den HTML-Code eingebettet. Wenn wir den vorherigen Code im Google Chrome-Browser öffnen, sehen wir Folgendes:
VERGRÖSSERN
Und wenn wir es jetzt im Internet Explorer machen:
VERGRÖSSERN
Sie haben überprüft, dass es von Windows aus geöffnet wurde, um die beiden vorherigen Aufnahmen zu machen. Wenn wir es von Mozilla Firefox in Linux öffnen, sehen wir Folgendes:
Wenn Sie einen Code in einer Sprache für den Server benötigen, finden Sie unten einen Code, den Sie sehen können Wie bekomme ich den Agenten in PHP?, denken Sie daran, dass es dem Benutzer möglich ist, JavaScript zu deaktivieren:
Wir kommen nun zu dem, was uns am meisten interessiert. Dazu schauen wir uns zunächst ein Beispiel an, was wir bisher auf unserer Seite besprochen haben: Solvetic.
Solvetic prüfen
Wenn wir Solvetic von unserem PC aus eingeben, sehen wir mit dem Google Chrome-Browser den folgenden Aspekt, vollständig, auf einen Blick sehen wir alles, um sich einzuloggen und zu registrieren:
Aber wenn wir von Google Chrome auf einem Android-Handy eingeben, wird natürlich nicht der gesamte Inhalt auf dem Bildschirm angezeigt, es muss berücksichtigt werden, es ist nicht sehr angenehm, mit dem Finger streichen zu müssen, um die Teile des zu sehen Bildschirm (zum Glück sind heutzutage nur wenige Websites so), unten lasse ich das Bild, wie Solvetic auf dem Handy aussieht:
Wie wir sehen, passt es sich dem Bildschirm an, jetzt haben wir die Menüs oben, wenn wir auf die linke Seite (die 3 Balken) klicken, sehen wir die Optionen, um zu den Artikeln, Tutorials usw. zu gelangen.
Und wenn wir auf das Symbol rechts klicken (Aspekt des Ein / Aus-Buttons), haben wir die Möglichkeit, sich anzumelden oder zu registrieren.
Jetzt werden wir sehen, wie eine Seite bereitgestellt werden kann, abhängig von dem Gerät, das uns besucht.
Wie erreicht man das Ergebnis?
Es gibt mehrere Möglichkeiten, dieses Ergebnis zu erreichen, es gibt Skripte, die direkt in der Anwendung platziert werden oder wir haben auch Frameworks wie Bootstrap, aber wir können auch von Nginx ein ähnliches Ergebnis erzielen, da wir durch das Erkennen des Browser-Agenten eine Umschreibung vornehmen können und an den Benutzer zu einem anderen Teil der Anwendung senden, ohne die URL zu ändern, die er sieht.
Wenn Sie Nginx kennenlernen möchten, hinterlassen wir unten einen Link, wo Sie es auch herunterladen können:
Um dies zu erreichen, müssen wir zuerst den Browser-Agenten identifizieren. Wenn es sich um einen von denen handelt, die wir in die Regel eingeben möchten, verwenden wir eine einfache Bedingung und wenden die Regel darauf an. All dies tun wir in unserem Standortblock.
Schauen wir uns den folgenden Beispielcode an, um dies zu erreichen. Sie können sehen, wie kurz er ist:
location / {if ($ http_user_agent ~ * '(iPhone | iPod)') {rewrite ^. + http://m.example.com/$uri; }}}Wie wir im Code sehen, identifizieren wir den Browser-Agenten, wenn er dem von uns angegebenen entspricht (in diesem Fall iPhone oder iPod), führen wir eine Umschreibung durch. Dies kann so umfassend oder spezifisch erfolgen, wie es unsere Logik erfordert Beispiel ist es mit nur einer Bedingung leichter zu verstehen.
Wie wir sehen, ist es ziemlich einfach, den Browser-Agenten zu identifizieren, und es ist noch einfacher, dies zu unseren Gunsten zu verwenden, da wir, wie bereits erwähnt, eine klare Vorstellung davon haben müssen, was wir tun möchten, um den zu verwenden Werkzeuge und erhalten den gewünschten Nutzen.
Kommentieren Sie zum Abschluss des Tutorials, dass Sie mit Responsive Design erreichen, dass sich das Erscheinungsbild Ihrer Webseite ohne weitere Komplikationen an den Bildschirm der Geräte anpasst.
