Heim >Web-Frontend >js-Tutorial >So erfassen Sie mobile Geräte mit JQuery

So erfassen Sie mobile Geräte mit JQuery

Joseph Gordon-Levitt
Joseph Gordon-LevittOriginal
2025-02-27 01:19:11715Durchsuche

How to Detect Mobile Devices using jQuery

Zusammenfassung der Schlüsselpunkte

  • Die in diesem Artikel bereitgestellten Jquery -Code -Snippets können erkennen, ob Benutzer mobile Geräte zum Durchsuchen von Webseiten verwenden und bestimmte JavaScript -Code -Snippets für verschiedene mobile Geräte wie iPad, iPhone, iPod, idevice, Android, Blackberry, Webos und Webos bereitstellen Windows Phone.
  • Die grundlegende Methode zum Erkennen mobiler Geräte mit JQuery besteht darin, das Attribut navigator.userAgent zu verwenden und nach Schlüsselwörtern zu suchen, die mobile Geräte in Kombination mit regulären Ausdrücken anzeigen.
  • Während die Erkennung von Benutzeragenten ein nützliches Instrument zur Identifizierung von mobilen Geräten ist, ist es nicht 100% zuverlässig, da es einfach ist, den Benutzeragenten zu schmieden oder zu ändern. Daher wird empfohlen, die Erkennung von Benutzeragenten in Kombination mit anderen Methoden wie der Erkennung von Merkmalen oder der Erkennung von Bildschirmgrößen zu verwenden.

Mit dem folgenden optimierten JQuery -Code -Snippet können festgestellt werden, ob ein Benutzer mit einem mobilen Gerät stöbert. Wenn Sie ein bestimmtes Gerät testen müssen, habe ich unten einige JavaScript -Code -Snippets bereitgestellt, mit denen verschiedene mobile Handheld -Geräte wie iPad, iPhone, iPod, IDEVICE, Android, Blackberry, Webos und Windows Phone erfasst werden können.

<code class="language-javascript">/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 * jQuery.browser.mobile 将在浏览器为移动设备时为 true
 **/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|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|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a)||/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|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|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|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);</code>

Beispiel für den Gebrauch:

<code class="language-javascript">if(jQuery.browser.mobile){
   console.log('您正在使用移动设备!');
}else{
   console.log('您没有使用移动设备!');
}</code>

Erkennung von iPad

<code class="language-javascript">var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad){
  //...
}</code>

Erkennung von iPhone

<code class="language-javascript">var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone){
  //...
}</code>

Erkennung von iPod

<code class="language-javascript">var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod){
  //...
}</code>

Erkennung idevice

<code class="language-javascript">var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
if (isiDevice){
  //...
}</code>

Erkennung von Android

<code class="language-javascript">var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid){
  //...
}</code>

Erkennung von Blackberry

<code class="language-javascript">var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());
if (isBlackBerry){
  //...
}</code>

Erkennung von webOS

<code class="language-javascript">var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());
if (isWebOS){
  //...
}</code>

Erkennung von Windows Phone

<code class="language-javascript">var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
if (isWindowsPhone){
  //...
}</code>

Der FAQ-Abschnitt zur Verwendung von JQuery zur Erkennung mobiler Geräte wurde weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der Kerninhalt wurde in dem obigen Code und der obigen Zusammenfassung widerspiegelt.

Das obige ist der detaillierte Inhalt vonSo erfassen Sie mobile Geräte mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn