JavaScript identifiziert das Mobiltelefon, springt zur mobilen Website und kehrt zur Computerversion zurück

Im heutigen Zeitalter des mobilen Internets surfen immer mehr Benutzer lieber über ihr Mobiltelefon im Internet. Daher ist es zu einem unvermeidlichen Trend geworden, Websites bereitzustellen, die an verschiedene Geräte angepasst sind. In diesem Zusammenhang ist es entscheidend, den Benutzern einen einfachen Wechsel zwischen der Computerversion und der mobilen Version zu ermöglichen.

Darunter ist es eine gängige Methode, das vom Benutzer verwendete Gerät über Javascript-Code zu identifizieren und automatisch zur entsprechenden angepassten Version der Website zu springen. Als Nächstes wird in diesem Artikel der Implementierungsprozess dieser Methode vorgestellt.

1. Gerätetyp erkennen

Zu wissen, welche Art von Gerät der Benutzer verwendet, ist die Voraussetzung für die Entscheidung, ob zur mobilen Version gewechselt werden soll. Dazu müssen Sie die Geräteinformationen des Benutzers über die Eigenschaft navigator.userAgent in Javascript abrufen.

Der Beispielcode lautet wie folgt:

// 判断是否为移动设备
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

Mit dieser Funktion können Sie erkennen, ob der Benutzer ein mobiles Gerät verwendet. Wenn das Testergebnis wahr ist, bedeutet dies, dass der Benutzer ein mobiles Gerät verwendet und zur mobilen Version der Website springen muss.

2. Springen Sie zur mobilen Version der Website

Wenn das Erkennungsergebnis zeigt, dass der Benutzer ein mobiles Gerät verwendet, muss der Benutzer auf das mobile Gerät umgeleitet werden Version der Website.

Die spezifische Methode lautet wie folgt:

if (isMobile()) {
   window.location.href = "http://m.example.com";
}

In diesem Code ruft die Methode zum Bestimmen, ob der Benutzer ein mobiles Gerät ist, die obige Funktion isMobile() auf Sind diese erfüllt, wird der Benutzer zur mobilen Version der Website weitergeleitet. Die RedirectUrl muss hier durch die tatsächliche Website-URL der mobilen Version ersetzt werden.

3. Zurück zur Computerversion der Website

Zur Benutzerfreundlichkeit muss in der mobilen Version der Website ein Link bereitgestellt werden, damit Benutzer „zurückkehren“ können die Computerversion der Website". Bei der Implementierung dieser Funktion ist es auch erforderlich, den Gerätetyp des Benutzers über Javascript-Code zu erkennen. Wenn der Benutzer ein PC-Gerät verwendet, muss er zur Desktop-Version der Website weitergeleitet werden.

Der Beispielcode lautet wie folgt:

// 判断是否为 PC 设备
function isPC() {
   return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 点击“回到电脑版网站”时，跳转到电脑版网站
$("#returnToPC").click(function(){
   if (isPC()) {
       window.location.href = "http://www.example.com";
   }
});

In diesem Code ist der Link „Zurück zur PC-Version der Website“ an ein Klickereignis gebunden, wenn der Benutzer klickt über diesen Link, während der Erkennung Nachdem Sie festgestellt haben, dass der Benutzer ein PC-Gerät verwendet, leiten Sie den Benutzer zur entsprechenden Computerversion der Website weiter.

Zusammenfassung

Wie oben erwähnt, Identifizierung des Benutzergerätetyps in Javascript und Springen zur entsprechenden angepassten Version der Website sowie Bereitstellung der Funktion zur Rückkehr zum Computer Version der Website, sind viele Die Grundlage für das plattformübergreifende Surfen auf der Website. Im tatsächlichen Einsatz muss es entsprechend den unterschiedlichen Geschäftsanforderungen optimiert und erweitert werden, um den Anforderungen der Benutzer besser gerecht zu werden.

Das obige ist der detaillierte Inhalt vonJavaScript identifiziert das Mobiltelefon, springt zur mobilen Website und kehrt zur Computerversion zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!