Четыре метода, которые вы должны знать для определения типа клиента с помощью JS

Введение

Когда мы пишем адаптивный макет, мы всегда должны учитывать, является ли это мобильным устройством, на основе этого здесь были сформулированы 4 метода для определения того, является ли клиент iOS или Android. Поделимся этим для вашего ознакомления и обучения,下面就让我们一起来详细了解一下吧。

Методы такие:

1. Первый способ: определяем браузер по userAgent, используем регулярное выражение для определения, является ли это клиентом iOS или Android

User Agent по-китайски означает агент пользователя, является частью Http-протокола, входит в состав заголовков. User Agent также сокращенно называется UA. Это особый строковый заголовок, который предоставляет информацию о типе и версии используемого браузера, операционной системе и ее версии, ядре браузера и т.д. Через эту маркировку сайт, на который пользователь заходит, может отображать различные макеты, что позволяет предоставить пользователям лучшее trải nghiệm hoặc проводить статистический анализ; например, доступ к Google с телефона и компьютера differs, это Google определяет по UA пользователя. UA можно маскировать.

The standard format of the browser's UA string: Browser identifier (Operating system identifier; Encryption level identifier; Browser language) Rendering engine identifier version information. However, different browsers are different.

Код следующий:

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

2. The second type: check whether it is a mobile terminal (Mobile), ipad, iphone, WeChat, QQ, etc.

2.1 The code is as follows:

<script type="text/javascript">
//determine the access terminal
var browser={
 versions:function(){
  var u = navigator.userAgent; 
   app = navigator.appVersion;
  return {
   trident: u.indexOf('Trident') > -1, //IE core
   presto: u.indexOf('Presto') > -1, //Opera core
   webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google core
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox core
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //whether it is a mobile terminal
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios terminal
   android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // Термин для мобильного устройства android
   iPhone: u.indexOf('iPhone') > -1 , // Проверка, является ли это iPhone или QQHD браузер
   iPad: u.indexOf('iPad') > -1, // Проверка, является ли это iPad
   webApp: u.indexOf('Safari') == -1, // Проверка, является ли это веб-приложением, у которого нет заголовка и нижней панели
   weixin: u.indexOf('MicroMessenger') > -1, // Проверка, является ли это WeChat (добавлено 22.01.2015)
   qq: u.match(/\sQQ/i) == " qq" // Проверка, является ли это QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

2.2. Способ использования

/Проверка, является ли браузер IE
if(browser.versions.trident){ alert("is IE"); }
// Проверка, является ли браузер webKit
if(browser.versions.webKit){ alert("is webKit"); }
// Проверка, является ли это мобильной версией
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("Мобильная версия"); }

2.3. Проверка языка браузера

currentLang = navigator.language; // Проверка языка браузера для всех остальных браузеров
if(!currentLang){// Проверка языка браузера IE
currentLang = navigator.browserLanguage;
}
alert(currentLang);

3. Проверка клиента iPhone|iPad|iPod|iOS|Android

Код следующий:

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // Проверка iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //определение Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. Определение pc или мобильного устройства

Код следующий:

<script>
　　//определение, посещает ли пользователь мобильное устройство
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //возвращает URL веб-страницы, с которой был-transition к текущей веб-странице
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //адрес wap
  }
 }
</script>

5. Обычный код перехода

Просмотр кода

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == '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; // адрес для wap
  }
 })();
 </script>

Обобщение

Вот и все, что есть в этой статье, надеюсь, что контент этой статьи будет иметь определенную ценность для вашего обучения или работы, если у вас есть вопросы, пожалуйста, оставляйте комментарии для обсуждения, спасибо за поддержку учебника «Крик».

Заявление: контент этой статьи взяты из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не имеет права собственности, не прошел редактирование, также не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для отчета, и предоставьте соответствующие доказательства. Как только будет установлено, сайт немедленно удалит涉嫌侵权的内容。