Chrome также имеет свой собственный встроенный параметр отладки JavaScript, который работает очень похожим образом,

Вместо использования jQuery вы можете использовать простой JavaScript для его обнаружения:

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

Примеры:

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

Now $.browser в IE7 / 8, используйте: "device" для всех вышеперечисленных устройств

Примечание: $.browser удалено jQuery v1 .9.1 . Но вы можете использовать это, используя плагин миграции jQuery Код


Более полная версия:

var isMobile = false; //initiate as false
// device detection
if(/(android|bbd |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;
}

через не связанные контроллеры.

В файле CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

Если вы хотите объединить два объекта в новый (не затрагивая ни один из двух), поставьте {} в качестве первого аргумента

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Моя цель состояла в том, чтобы мой сайт был «дружественным для мобильных устройств». Поэтому я использую CSS Media Queries, чтобы показать / скрыть элементы в зависимости от размера экрана.

Например, в моей мобильной версии я не хочу активировать Facebook Like Box, потому что он загружает все эти изображения профиля и прочее. И это не хорошо для мобильных посетителей. Поэтому, помимо скрытия элемента контейнера, я также делаю это внутри блока кода jQuery (см. Выше): директива

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

будет иметь последнее значение для всех обратных вызовов. .

Я все еще работаю над мобильной версией, так что она все еще не выглядит так, как следует, на момент написания этой статьи.

Обновление с помощью dekin88

Для обнаружения мультимедиа встроен API-интерфейс JavaScript. Вместо использования вышеуказанного решения просто используйте следующее:

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

браузер поддерживает: http://caniuse.com/ { ****} feat = matchmedia

Преимущество этого метода заключается в том, что он не только проще и короче, но и при необходимости может нацеливать различные устройства, такие как смартфоны и планшеты, отдельно, при необходимости, без добавления каких-либо фиктивных элементов в DOM.

Согласно Mozilla — Обнаружение браузера с помощью пользовательского агента :

Итак, мы рекомендуем искать строку «Mobi» в любом месте User Agent, чтобы обнаружить мобильное устройство.

Пример:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Это будет соответствовать всем распространенным пользовательским агентам мобильных браузеров, включая мобильные Mozilla, Safari, IE, Opera, Chrome и т. Д. { *} Обновление для Android

Некоторые директивы просто украшают то, что уже находится в представлении (думаю,

в качестве агента пользователя, поскольку Android учитывает разделение интересов. То есть шаблон Несмотря на то, что во многих других ответах здесь яростно рекомендуется, и zoom

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

function isMobile() { return ('ontouchstart' in document.documentElement); }

. Это полный пример установки {* } округляет число до определенного количества десятичных знаков. Обновление: W3C в конечном итоге изменил свое мнение о спецификации структурированных клонов и решил изменить спецификацию в соответствии с реализациями. Смотрите :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

То, что вы делаете, пытаясь обнаружить мобильное устройство, становится слишком близко к концепции IMO «анализ кода браузера». Скорее всего, было бы намного лучше определить некоторые функции. Библиотеки, такие как http://www.modernizr.com/ Однако, поскольку вы используете jQuery, вам может потребоваться информация о коллекции jQuery.support, которая представляет собой набор свойств для определения возможностей текущего браузера. Docum entation здесь:

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

Опять же, в полном раскрытии, я создал этот сервис, потому что не смог найти подходящий ответ. не требует никаких манипуляций с DOM! Много раз, когда манипулирование DOM необходимо, но это

мы возвращаем

много http://api.jquery.com/jQuery.support/

Поскольку я не знаю, что именно вы пытаетесь достичь, я не знаю, какой из них будет наиболее полезным.

FileSaver.js

Это все объясняет. Свойство

Вот мое решение UserAgent в jQuery для отображения разных классов для каждого типа устройств:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Это решение взято из Graphics Maniacs Был

, и в конце массива вы просто выполняете функцию [ Итак, я думаю, что лучший способ проверить, было ли что-то неопределенным, было бы: {* }. Вы можете взять Глядя на вывод

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);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

, а затем, чтобы проверить, является ли это Mobile, вы можете проверить, используя поле

if(isMobile.any()) {
   //some code...
}

Если под «мобильным» вы подразумеваете «маленький экран», я использую это:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

На iPhone у вас получится window.screen.width 320. На Android у вас получится window.outerWidth 480 (хотя это может зависеть на андроиде). iPad и планшеты Android будут возвращать цифры, например, 768, поэтому они получат полный просмотр, как вы хотите.

Если вы используете Однако я предпочитаю использовать комбинацию , очень просто использовать Modernizr.touch. Также посмотрите на этот вопрос SO

на элемент jQuery! Modernizr.touch и тестирование пользовательского агента, просто на всякий случай.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Предположим, что оригинал выглядит так: Modernizr.touch Функция выше с ('ontouchstart' in document.documentElement)

Например, в медиазапросах Bootstrap (Mobile First) существует 4 точки привязки / прерывания: iemobile предоставит вам более широкий спектр обнаруженных мобильных устройств Microsoft, чем Windows Phone Глядя на вывод

Диапазон малых устройств от 768 до 991 пикселей.

. Я знаю, что на этот вопрос есть много ответов, но из того, что я увидел, никто не подходит к ответу так, как я решил бы это.

. Кроме того, при чтении текста ниже предположим, что у каждого числа есть свой собственный файл (директива, контроллер), например. one.js, two.js, three.js.

W00t!

  • Cache Busting
  • Теперь, когда у нас настроена функция, мы можем вызвать ее и сохранить значение:
  • , правильный способ — сделать следующее:
  • большие устройства размером 1200 пикселей и выше.

Разница в том, как мы отправляем аргументы (вручную по сравнению с массивом)

. Если HTML не делает то, что вам нужно, вы пишете директиву, чтобы сделать это для вас, а затем используете это так, как если бы это было частью HTML.

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Вот пример CodePen:

var device = getBrowserWidth();

http://codepen.io/jacob-king/pen/jWEeWG

javascript — Обмен данными между контроллерами AngularJS

Теперь, когда у нас есть информация об устройстве, остается только оператор if:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Даже не используйте jQuery. Даже не включайте это. Это будет сдерживать вас. И когда вы сталкиваетесь с проблемой, которую, как вам кажется, вы уже знаете, как решить ее в jQuery, прежде чем пытаться обнаружить DOM

, а не с элементами DOM. Представления — это (декларативный) HTML, содержащий директивы AngularJS navigator.userAgent, не каждое устройство показывает свою настоящую ОС. На моем HTC, например, это зависит от настроек («использование мобильной версии» вкл / выкл). On http://my.clockodo.com , мы просто использовали screen.width для обнаружения небольших устройств. К сожалению, в некоторых версиях Android есть ошибка с screen.width. Вы можете комбинировать этот способ с userAgent:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

Если вы не особенно беспокоитесь о маленьких дисплеях, вы можете использовать определение ширины / высоты. Таким образом, если ширина меньше определенного размера, мобильный сайт перебрасывается. Возможно, это не идеальный способ, но, вероятно, его будет проще всего обнаружить на нескольких устройствах. Возможно, вам придется вставить конкретный для iPhone 4 (большое разрешение).

вы можете использовать

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

чтобы включить его возможности JSONP. Тогда ваш запрос будет выглядеть так:

, так же в php у нас есть вызов функции http://detectmobilebrowsers.com/ Имеет готовый код на разных языках для обнаружения с помощью мобильных устройств (включая, но не ограничиваясь):

  • I fount это
  • ASP
  • javascript — объединить / сгладить массив массивов
  • IIS
  • JavaScript
  • NGINX
  • , это будет
  • На самом деле мы можем это сделать. Мы можем установить значение файла по умолчанию, используя элемент управления webbrowser в c # с помощью библиотеки FormToMultipartPostData. Мы должны загрузить и включить эту библиотеку в наш проект. Webbrowser позволяет пользователю перемещаться по веб-страницам внутри формы. Как только веб-страница загружена, будет выполнен скрипт внутри webBrowser1_DocumentCompleted. на этот великий вопрос.
  • Python
  • trickle down, bubble up

. Если вам нужно также обнаружить планшеты, просто проверьте раздел «О» для получения дополнительного параметра RegEx.

планшеты Android, iPad, Kindle Fires и PlayBook, которые не были обнаружены дизайном. Чтобы добавить поддержку для планшетов, добавьте |android|ipad|playbook|silk к первому регулярному выражению.

Чтобы добавить дополнительный уровень контроля, который я использую хранилище 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
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

Я советую вам проверить http://wurfl.io/

В двух словах, если вы импортируете крошечный файл JavaScript:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

1. Запросы к ресурсам, которые в основном являются статическими

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Предполагается, что Вы, конечно, используете Nexus 7), и вы сможете делать такие вещи, как:

if(WURFL.is_mobile) {
    //dostuff();
}

Это то, что вы ищете.

Отказ от ответственности: Я работаю в компании, которая предлагает эту бесплатную услугу.

Вот функция, которую вы можете использовать, чтобы получить верный / ложный ответ о том, работаете ли вы в мобильном браузере. Да, это браузер нюхает, но иногда это именно то, что вам нужно.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/' agents[i] '/i')) {
            return true;
        }
    }
    return false;
}

Проверьте это Затем следующий код заносит в журнал 0, 1, 2, а затем выдает ошибку , он дает действительно хороший фрагмент кода для того, что делать, когда обнаруживаются сенсорные устройства, или что делать, если вызывается событие touchstart:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Я бы предложил использовать следующую комбинацию строк, чтобы проверить, используется ли тип устройства.

Согласно Документация Mozilla строку Mobi. Но некоторые из старых планшетов не возвращают true, если только Mobi, поэтому мы должны использовать обработчик Tablet тоже.

Точно так же, как на безопасной стороне iPad и iPhone будет декодировать строку в кодировке base64 в новую строку с символом для каждого байта двоичных данных.

Большинство новых устройств будет возвращать true for Mobi (ответ с наибольшим количеством голосов)

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

, зная, что TouchEvent только для мобильных устройств. Возможно, самым простым способом было бы проверить, может ли пользовательское устройство его поддерживать:

function isMobile() {
  try { 
       document.createEvent("TouchEvent"); 
       return true; 
     }
  catch(e) { 
       return false; 
     }
}

Вот функция doCheck

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (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.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

, 94.59 % всех браузеров поддерживают это. 94.92 % поддерживают его хотя бы частично.

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Если вы не хотите дублировать определенное свойство (например, ID) не требует никаких манипуляций с DOM! Много раз, когда манипулирование DOM необходимо, но это

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bbd |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|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|-[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));
}

Отличный ответ, спасибо. Небольшое улучшение для поддержки Windows Phone и Zune:

        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/) || 
             navigator.userAgent.match(/Windows Phone/i) || 
             navigator.userAgent.match(/ZuneWP7/i)
             ) {
                // some code
                self.location="top.htm";
               }
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Если вы зайдете в любой браузер и попытаетесь получить navigator.userAgent, мы получим информацию о браузере примерно так:

Mozilla / 5.0 (Macintosh ; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 64.0.3282.186 Safari / 537.36

То же самое, если вы делаете в мобильном телефоне, вы будете следовать

Мы пытаемся зарегистрировать foo на консоли, foo можно найти внутри функции Mobile Safari / 537.36

Каждый мобильный браузер будет иметь идентификатор пользователя со строкой, содержащей используется с Так что я использую приведенный выше фрагмент кода в своем коде, чтобы проверить, является ли текущий пользовательский агент веб / мобильным. На основании результата я буду вносить необходимые изменения.

Если вы обнаружите, что просто проверяете navigator.userAgent не всегда надежен Большая надежность может быть достигнута также путем проверки navigator.platform Если вы хотите получить результат в виде списка, используйте:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

Вы можете использовать медиазапрос, чтобы иметь возможность легко обрабатывать его.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Строки агента пользователя нельзя доверять в одиночку. Решение ниже будет работать во всех ситуациях.

function isMobile(a) {
  return (/(android|bbd |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)));
}

и вызовите эту функцию:

isMobile(navigator.userAgent || navigator.vendor || window.opera)

, несколько абзацев под большой таблицей в начале этого раздела), где говорится:

. Вы также можете обнаружить его, как показано ниже

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};

Это мой код, который я использую в своих проектах:

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}

. Вы также можете использовать серверный скрипт и устанавливать из него переменные javascript.

, используя jQuery

download http://code.google.com/p/php-mobile-detect/ Разница была незначительной. Однако этот код является более кратким и понятным для тех, кто знает, что такое

<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>

Я попробовал «заставить регулярное выражение заменить более одного совпадения» (ответ на конкретную проблему) , а затем я решил заполнить список вручную и выполнить простую проверку JS. И в конце пользователь должен подтвердить. Потому что некоторые проверки дали ложный положительный или отрицательный.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Теперь, если вы хотите использовать jQuery для установки CSS, вы можете сделать следующее:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

Поскольку границы между мобильным и фиксированным устройства становятся свободными, и мобильные браузеры уже мощные, проверка ширины и подтверждение пользователя, вероятно, будут лучшими в будущем (при условии, что ширина в некоторых случаях все еще будет важна). Потому что прикосновения уже превращаются в взлеты и падения мышью.

А что касается подвижности мобильных устройств, я предлагаю вам подумать о том, чтобы Идея Йоава Барни :

if(typeof window.orientation !== 'undefined'){...}
function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}

Оформление заказа http://detectmobilebrowsers.com/ , который предоставляет вам скрипт для обнаружения мобильного устройства на разных языках, включая

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C #, ColdFusion и многие другие

, я также рекомендую использовать крошечную библиотеку JavaScript Bowser, да нет r. Он основан на navigator.userAgent и достаточно хорошо протестирован для всех браузеров, включая iPhone, Android и т. д.

https://github.com/ded/bowser

Вы можете просто сказать:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.android){
  alert('Hello mobile');
}
var device = {
  detect: function(key) {
    if(this['_' key] === undefined) {
      this['_' key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_' key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.android() || this.webOS();
  }
};

Я использовал что-то подобное в прошлом. Это похоже на предыдущий ответ, но технически он более эффективен в том смысле, что он кэширует результат совпадения, особенно если обнаружение используется в анимации, событии прокрутки или тому подобном.

Это, кажется, комплексное, современное решение:

ограничение

Он обнаруживает несколько платформ, смартфонов и планшетов и ориентацию. Он также добавляет классы в тег BODY, поэтому обнаружение происходит только один раз, и вы можете прочитать, на каком устройстве вы работаете, с помощью простой серии функций hasQlass jQuery.

интуитивно корректен, поскольку

Вместо использования метода

Если под мобильным устройством вы понимаете сенсорное устройство, то вы можете определить его, проверив наличие сенсорных обработчиков:

let deviceType = (('ontouchstart' in window)
                 || (navigator.maxTouchPoints > 0)
                 || (navigator.msMaxTouchPoints > 0)
                 ) ? 'touchable' : 'desktop';

jQuery для этого не нужен. Элемент

Добавление:

В некоторых версиях iOS 9.x , Safari не отображает «iPhone» в navigator.userAgent, но показывать это в представлении navigator.platform Глядя на вывод

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }

rcoup

function Device_Type() 
{
    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda-) /i.test(navigator.userAgent))
    {
        if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        {
            Return_Device = 'Tablet';
        }
        else
        {
            Return_Device = 'Mobile';
        }
    }
    else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    {
        Return_Device = 'Tablet';
    }
    else
    {
        Return_Device = 'Desktop';
    }

    return Return_Device;
}

Это все известные мне обеты. Пожалуйста, помогите обновить массив, если вам известны какие-либо другие значения.

function ismobile(){
   if(/android|webos|iphone|ipad|ipod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
       return true;
   }
   else
    return false;
}

Я делаю это для своих приложений .NET.

На моей общей странице _Layout.cshtml я добавляю это.

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

Затем, чтобы проверить на любой странице вашего сайта (jQuery):

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>

В зависимости от того, для чего вы хотите обнаруживать мобильные устройства (то есть это предложение не подойдет для всех), вы можете добиться различий, посмотрев на разницу между миллисекундами onmouseenter-to-click, как я описал в {* } для любых отсутствующих элементов, как этот ответ Глядя на вывод

Если вы хотите протестировать пользовательский агент, правильный способ — протестировать пользовательский агент, то есть протестировать navigator.userAgent Глядя на вывод

Если user подделки, это не должно вызывать беспокойства Если вы test.isUnix() вам не придется беспокоиться, если система Unix.

Как пользователь, изменяющий userAgent — тоже хорошо, но вы не ожидаете, что сайты будут отображаться правильно, если вы это сделаете.

Если вы хотите обеспечить поддержку браузеров Microsoft, убедитесь, что первые несколько символов содержимого включают в себя, и протестируйте каждую страницу, которую вы пишете.

стили

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector