Wie kann ich mit jQuery erkennen, ob sich ein Benutzer auf einem mobilen Gerät befindet?

So erkennen Sie ein mobiles Gerät mit jQuery

Das Erkennen, ob ein Benutzer von einem mobilen Gerät aus auf Ihre Website zugreift, kann bei der Anpassung Ihrer Website hilfreich sein Inhalt oder Benutzererfahrung entsprechend anpassen. jQuery, eine beliebte JavaScript-Bibliothek, bietet eine Möglichkeit, diese Erkennung zu erreichen, aber ihre $.browser-Funktion wird nicht empfohlen, da sie begrenzte und möglicherweise ungenaue Informationen liefert.

Stattdessen können Sie eine Kombination aus JavaScript und CSS verwenden um mobile Geräte zu erkennen. Ein Ansatz besteht darin, die Eigenschaft navigator.userAgent zu verwenden, die Informationen über das Gerät, den Browser und das Betriebssystem des Benutzers enthält. Indem Sie Ihre Geräteerkennungslogik mit bekannten Werten in der Zeichenfolge navigator.userAgent abgleichen, können Sie feststellen, ob ein mobiles Gerät verwendet wird.

Hier ist ein Beispiel, wie Sie dies mit einfachem JavaScript tun können:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // Some code for mobile devices
}

Um dies über jQuery zugänglicher zu machen, können Sie es mit Folgendem kombinieren:

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Dadurch wird das $.browser-Objekt um erweitert eine „Geräte“-Eigenschaft, die angibt, ob ein mobiles Gerät verwendet wird.

Hinweis: Die enthaltene jQuery-Methode $.browser wurde in jQuery v1.9.1 entfernt. Wenn Sie diese Methode verwenden müssen, können Sie das jQuery-Migrations-Plugin installieren, das eine Kompatibilitätsschicht für ältere jQuery-Versionen bereitstellt.

Ein gründlicherer Ansatz:

var isMobile = false; // Initialize as false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
  isMobile = true;
}

Diese Version bietet einen gründlicheren Erkennungsmechanismus, der ein breiteres Spektrum mobiler Geräte abdeckt.

Beachten Sie, dass die Verwendung der Benutzeragentenerkennung aus folgenden Gründen nicht für moderne Webanwendungen empfohlen wird seine Grenzen und Ungenauigkeiten. Erwägen Sie, wenn möglich, stattdessen die Funktionserkennung oder Medienabfragen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery erkennen, ob sich ein Benutzer auf einem mobilen Gerät befindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!