Я ищу функцию, которая возвращает булево значение, если у пользователя есть мобильный браузер или нет.
Я знаю, что могу использовать navigator.userAgent
и написать эту функцию с помощью regex, но user-agents слишком разнообразны для разных платформ. Я сомневаюсь, что подобрать все возможные устройства будет легко, и я думаю, что эта проблема уже решалась много раз, так что должно быть какое-то полное решение для такой задачи.
Я смотрел на этот сайт, но, к сожалению, скрипт настолько непонятен, что я понятия не имею, как использовать его для моей цели, которая заключается в создании функции, возвращающей true / false.
Вот функция, использующая безумно длинный и всеобъемлющий regex, который возвращает значение true или false в зависимости от того, просматривает ли пользователь сайт с мобильного телефона или нет.
window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|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|\-[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(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
Для тех, кто хочет включить планшеты в этот тест (хотя, возможно, не стоит), можно использовать следующую функцию:
window.mobileAndTabletcheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino|android|ipad|playbook|silk/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|\-[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(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
Вы можете сделать это, просто пробежавшись по списку устройств и проверив, совпадает ли useragent с чем-нибудь подобным:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
Однако, поскольку вы считаете, что этот метод ненадежен, вы можете предположить, что любое устройство с разрешением 800x600 или меньше тоже является мобильным устройством, что еще больше сузит вашу цель (хотя в наши дни многие мобильные устройства имеют гораздо большее разрешение, чем это).
т.е.
function detectmob() {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
}
Ссылка:
Как насчет:
if (typeof window.orientation !== 'undefined') { ... }
...поскольку смартфоны обычно поддерживает это свойство и настольных браузеров Дон'т.
Редактировать: как @Gajus указал, что данное решение является теперь устаревшим и должен'т быть использованы (https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation)
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
Как использовать
if( isMobile.any() ) alert('Mobile');
Чтобы проверить, находится ли пользователь на определенном мобильном устройстве:
if( isMobile.iOS() ) alert('iOS');
Ссылка: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
Расширенная версия на github: https://github.com/smali-kazmi/detect-mobile-browser
Вот такое простое решение из источника facebook's в рогатка
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
/* your code here */
}
Ищете простой, чистый способ, чтобы обнаружить, что "сенсорные экраны устройств", который я классифицирую как мобильных и планшетов. Не найти чистое место в текущем ответов, но не на следующие, которые могут также помочь кому-то.
var touchDevice = ('ontouchstart' in document.documentElement);
Редактировать: для поддержки настольных компьютеров с сенсорным экраном и мобильных телефонов в то же время вы можете использовать следующие:
var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
Там's нет идеальное решение для обнаружения JS код выполняется на мобильном устройстве, но следующие два варианта должны работать в большинстве случаев.
в
!функция () {ВАР b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.\bAndroid\b)(?=.\bMobile\b)/i,f=/Android/i,g=/(?=.\bAndroid\b)(?=.\bSD4930UR\b)/i,h=/(?=.\bAndroid\b)(?=.\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.\bWindows\b)(?=.\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Опера мини/я,п=/(Криос|хром)(?=.\bMobile\б)/я,о=/(?=.\bFirefox\б)(?=.*\bMobile\б)/I,Р=новое регулярное выражение (и"(?:В Nexus 7|BNTV250|разжигает пожар|шелк|ГТ-платы P1000) и","Я", у),г=функция(а,б){возвращение.Тест(Б)},функция р=(а){ВАР р=а||навигатор.Ашераденс,З=Р.Сплит (на"1AN-то");возврат"не определено" у!=для вызова typeof с1 и усилитель;&(р=с[0]),С=Р.Сплит (на"Твиттере", У),"не определено" у!=для вызова typeof s1&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==окно вызова typeof?этот вид:void 0},функция S=() {ВАР а=новый R;возврат.Класс=Р,С}; и"не определено" у!=модуль для вызова typeof&&модуль.экспорт&ампер;&ампер;"не определено" и==typeof на окне?модуль.экспорт=Р:"не определено" у!=модуль для вызова typeof&&модуль.экспорт&ампер;&ампер;"не определено" у!=окно вызова typeof?модуль.экспорт=С (): и"функция" в==typeof на определение и усилитель;&определить.АМД?определить (на"isMobile и",[],есть.isMobile=S (В). а).isMobile=s (в)}(эта);
alert(isMobile.any ? 'Mobile' : 'Not mobile');
в
Данного браузера нюхают код-это библиотеку isMobile.
Окна проверить, если`.ориентация определяется :
в
в окна isMobile ВАР=.ориентация > -1; предупреждение(isMobile ? 'Мобил' : 'не с мобильного'); в
Не все сенсорные устройства являются мобильными и наоборот. Поэтому, если вы хотите реализовать что-то специально для сенсорного экрана, вы должны'т проверить, если Ваш браузер запускать на мобильном устройстве, но достаточно ли устройств с сенсорным экраном поддержка :
в
в ВАР hasTouchscreen = 'ontouchstart' в окно; предупреждение(hasTouchscreen ? 'имеет сенсорный экран' : 'Не'т иметь сенсорный экран'); в
Чтобы добавить дополнительный уровень контроля я использую хранилище HTML5, чтобы обнаружить, если он использует мобильный хранения или столе. Если браузер не поддерживает хранилище у меня есть массив имен мобильный браузер, и я сравниваю агента пользователя с браузерами в массиве.
Это довольно просто. Здесь-это функция:
// Used to detect whether the users browser is an mobile browser
function isMobile() {
///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>
if (sessionStorage.desktop) // desktop storage
return false;
else if (localStorage.mobile) // mobile storage
return true;
// alternative
var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile'];
for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;
// nothing found.. assume desktop
return false;
}
Функция обнаружения гораздо лучше, чем пытаться выяснить, какое устройство вы находитесь, и очень трудно идти в ногу с новыми устройствами выходит все время, библиотека как Modernizr позволяет вам знать, если определенная функция или нет.
Как уже говорили многие, опираясь на движущуюся цель данных агента пользователя является проблематичным. То же самое можно сказать для подсчета на размер экрана. Мой подход заимствован из техники для CSS, чтобы определить, если интерфейс сенсорный. С помощью чистого JavaScript (поддержку всех современных браузерах), медиа-запрос, вы можете легко определить, если устройство является мобильным.
function isMobile() {
var match = window.matchMedia || window.msMatchMedia;
if(match) {
var mq = match("(pointer:coarse)");
return mq.matches;
}
return false;
}
Вот решение для userAgent, которое является более эффективным, чем match...
function _isMobile(){
// if we want a more complete list use this: http://detectmobilebrowsers.com/
// str.test() is more efficent than str.match()
// remember str.test is case sensitive
var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
(navigator.userAgent.toLowerCase());
return isMobile;
}
Действительно хороший способ определения мобильных или планшетных устройств-это если браузер может создать сенсорное событие.
Простой JavaScript Код:
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
# do whatever you wanna do!
}
Этот работал для меня очень хорошо, но там может быть проблема с ноутбуком устройства, которые включают в себя сенсорный дисплей.
Я не уверен, если ноутбук с сенсорным экраном будет обнаружен как мобильное устройство, потому что я не'т протестировал.
По данным МДН'статья на определение браузера с помощью агента пользователя, рекомендуется избегать такого подхода, если возможно, и предложить другие варианты, такие как функции обнаружения.
Однако, если необходимо использовать агента пользователя в качестве средства, чтобы обнаружить, если устройство является мобильным, они предполагают:
В резюме, мы рекомендуем искать строку “Моби” в любую точку агент пользователя для обнаружения мобильного устройства.
Таким образом, это один-лайнер будет достаточно:
окно isMobileDevice слово const=.навигатор.Ашераденс.столоверчением().включает в себя (на"Моби" - а);`
Вот мой переосмыслить решение проблемы. До сих пор не идеален. Единственно верным решением будет, если производители устройств начинают принимать всерьез то "Мобил" и "таблетки" от строки агента пользователя.
window.onload = userAgentDetect;
function userAgentDetect() {
if(window.navigator.userAgent.match(/Mobile/i)
|| window.navigator.userAgent.match(/iPhone/i)
|| window.navigator.userAgent.match(/iPod/i)
|| window.navigator.userAgent.match(/IEMobile/i)
|| window.navigator.userAgent.match(/Windows Phone/i)
|| window.navigator.userAgent.match(/Android/i)
|| window.navigator.userAgent.match(/BlackBerry/i)
|| window.navigator.userAgent.match(/webOS/i)) {
document.body.className += ' mobile';
alert('True - Mobile - ' + navigator.userAgent);
} else {
alert('False - Mobile - ' + navigator.userAgent);
}
if(window.navigator.userAgent.match(/Tablet/i)
|| window.navigator.userAgent.match(/iPad/i)
|| window.navigator.userAgent.match(/Nexus 7/i)
|| window.navigator.userAgent.match(/Nexus 10/i)
|| window.navigator.userAgent.match(/KFAPWI/i)) {
document.body.className -= ' mobile';
document.body.className += ' tablet';
alert('True - Tablet - ' + navigator.userAgent);
} else {
alert('False - Tablet - ' + navigator.userAgent);
}
}
Что происходит, когда планшет Nexus 7 есть только строка Андроид УА? Во-первых, мобильный станет правдой, чем потом на планшет также станет правдой, но планшет будет удалить строку мобильного УА из тега body.
Усс:
body.tablet { background-color: green; }
body.mobile { background-color: red; }
оповещения
линий развития. Консоль хрома может эмулировать много портативных устройств. Тест есть.
Редактировать:
Просто Дон'т использовать это, использовать функцию обнаружения вместо. Есть очень много устройств и марок там, что таргетирование бренда никогда не будет правильным решением.
Как только элемент получает фокус, вы сразу же размытость ее. Бутстреп-элемент управления datepicker, который является очень популярным и благоустроенным компонент с почти 10 000 звезд на GitHub, использует этот подход:
if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
this.input.blur();
}
https://github.com/uxsolutions/bootstrap-datepicker
Благодаря Тигруля для помощи.
Советую проверить http://wurfl.io/
В двух словах, если вы импортируете файл крошечный ДШ:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
вы останетесь с JSON-объект, который выглядит как:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(что'ы предполагая, что вы используете Нексус 7, конечно) и вы сможете делать вещи, как:
if(WURFL.form_factor == "Tablet"){
//dostuff();
}
Это то, что вы ищете.
Отказ от ответственности: я работаю на компанию, которая предлагает эту услугу бесплатно. Спасибо.
вот один лайнер
function isMobile() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
Есть простой трюк, чтобы определить, является ли это мобильное устройство, или нет. Существует просто проверить, если ontouchstart событие:
function isMobile()
{
return "ontouchstart" in window;
}
а как насчет "в окно.экрана.ширина и" ?
if (window.screen.width < 800) {
// do something
}
или
if($(window).width() < 800) {
//do something
}
Я думаю, это самый лучший способ, потому что есть каждый день нового мобильного устройства !
(хотя я думаю, что это'не поддерживается в старых браузерах, но дать ему попробовать :) )
Лучшие должны быть :
var isMobile = (/Mobile/i.test(navigator.userAgent));
Но как, как Йоав Барнеа рассказывает...
// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;
После этого 3 теста, я надеюсь, isMobile VAR является... ОК