Как лучше всего обнаружить мобильное устройство?

Question

Есть ли надежный способ определить, использует ли пользователь мобильное устройство в jQuery? Что-то похожее на атрибут CSS @media? Я хотел бы запустить другой скрипт, если браузер находится на портативном устройстве.

Функция jQuery $.browser - это не то, что я ищу.

Answer 1

В зависимости от того, для чего вы хотите обнаруживать мобильные устройства (то есть это предложение не подойдет для всех), вы можете достичь разницы, глядя на разницу между миллисекундами onmouseenter-on -lick, как я описал в этот ответ .

Answer 2

Вот еще одно предложение, реализованное на чистом JavaScript (es6)

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();

Answer 3

Это комплексное современное решение:

https://github.com/matthewhudson/device.js

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

Проверьте это ...

[ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я не имею ничего общего с человеком, который написал это.]

Answer 4

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

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

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

Answer 5

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

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;
}

Answer 6

http://www.w3schools.com/jsref/prop_nav_useragent.asp

Фильтр по названию платформы.

Пример:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


} 

^^

Answer 7

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

Почему 480, bcs, это то, что выглядит правильно, основываясь на информации, которую я имеюнайдены новые размеры устройства телефона.

if(document.body.clientWidth < 480 || document.body.clientHeight < 480) {
  //this is a mobile device
}

Answer 8

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

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

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

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

Итог ... Всегда используйте стандарты. Затем взломайте его, пока он не будет работать в текущей версии IE, и не ожидайте, что он будет хорошо выглядеть. Это то, что делает GitHub, и им только что дали 100 миллионов долларов.

Answer 9

Используйте это

if( screen.width <= 480 ) { 
    // is mobile 
}

Answer 10

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

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

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

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

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

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