Cuatro métodos que debes saber para determinar el tipo de cliente utilizando JS

Prólogo

Cuando escribimos el diseño adaptable, siempre debemos considerar si es un terminal móvil, basándonos en esto, aquí se resume4Este método juzga si el cliente es ios o android. Comparto aquí para que todos puedan referirse y aprender. Siga al editor para ver la introducción detallada a continuación.

El método es el siguiente:

1. Primera opción: mediante la juzgación del userAgent del navegador, usar expresiones regulares para juzgar si es cliente ios y Android

El nombre chino del User Agent es agente de usuario, es parte de Http protocolo, pertenece a la parte del encabezado. User Agent también se abrevia como UA. Es una cadena de encabezado especial, que es un identificador que proporciona al sitio web la información del tipo y versión del navegador que está utilizando, el sistema operativo y la versión, el motor del navegador, etc. A través de este identificador, el sitio web que el usuario accede puede mostrar diferentes composiciones para proporcionar una mejor experiencia al usuario o realizar estadísticas de información; por ejemplo, el acceso con el teléfono a Google y el acceso con la computadora no son los mismos, estos son determinados por Google según el UA del visitante. El UA se puede falsificar.

El formato estándar de la cadena de UA del navegador: identificador del navegador (identificador del sistema operativo; identificador del nivel de cifrado; idioma del navegador) identificador del motor de renderizado versión información. Pero los navegadores varían.

El código es el siguiente:

<script type="text/javascript">
 var u = navigator.userAgent;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Terminal android
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //Terminal ios
 alert('¿Es Android?');+isAndroid);
 alert('¿Es iOS?');+isiOS);
</script>

2. Segunda opción: verificar si es un terminal móvil (Mobile), ipad, iphone, WeChat, QQ, etc.

2.1 El código es el siguiente:

<script type="text/javascript">
//juzgar el terminal de acceso
var browser={
 versions:function() {
  var u = navigator.userAgent; 
   app = navigator.appVersion;
  devolver {
   trident: u.indexOf('Trident') > -1, //núcleo IE
   presto: u.indexOf('Presto') > -1, //núcleo opera
   webkit: u.indexOf('AppleWebKit') > -1, //Núcleo Apple y Google
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Núcleo Firefox
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //¿Es terminal móvil?
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //Terminal ios
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //Terminal android
   iPhone: u.indexOf('iPhone') > -1 , //¿Es iPhone o navegador QQHD?
   iPad: u.indexOf('iPad') > -1, //¿Es iPad?
   webApp: u.indexOf('Safari') == -1, //¿Es aplicación web sin cabecera ni pie?
   weixin: u.indexOf('MicroMessenger') > -1, //¿Es WeChat (2015-01-22Añadir)
   qq: u.match(/\sQQ/i) == " qq" //¿Es QQ?
  };
 },
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2 Método de uso

/Determinar si es núcleo IE
if(browser.versions.trident){ alert("is IE"); }
//Determinar si es núcleo webKit
if(browser.versions.webKit){ alert("is webKit"); }
//Determinar si es dispositivo móvil
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("Dispositivo móvil"); }

2.3 Detectar idioma del navegador

currentLang = navigator.language; //Determinar idioma del navegador excepto IE
if(!currentLang){//Determinar idioma del navegador IE
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. Determinar cliente de iPhone|iPad|iPod|iOS|Android

El código es el siguiente:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //Determinar iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //Determinar Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. Determinar si es PC o dispositivo móvil

El código es el siguiente:

<script>
　　//Determinar si se accede desde un dispositivo móvil
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //Devuelve la URL de la página donde se encuentra el enlace de navegación a la página actual
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //dirección de la versión wap
  }
 }
</script>

5. Código de redirección común

Ver el código

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  
  var bIsIpad = sUserAgent.match(/ipad/
  var bIsIphone = sUserAgent.match(/iphone os/
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:'1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = 'http://m.geekjc.com'+pathname; //dirección de la versión wap
  }
 })();
 </script>

Resumen

Esto es todo el contenido de este artículo, espero que el contenido de este artículo tenga cierta valoración de referencia para su aprendizaje o trabajo. Si tienen alguna pregunta, pueden dejar comentarios para intercambiar, gracias por el apoyo a la tutorial de gritos.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, se ha subido por usuarios de Internet de manera autónoma y este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por las responsabilidades legales. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.