Загрузите скрипт JQuery Mobile только для мобильных устройств

У меня есть веб-страница, которая должна быть правильно отображена на мобильных устройствах. Для этого я загрузил сценарий JQuery Mobile в заголовке страницы. Заголовок тега выглядит следующим образом:

<head> 
    <title>Page Title</title> 

    <link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css'; return false;" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

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

Я хотел бы узнать, знает ли кто-нибудь метод загрузки сценария JQuery Mobile только в том случае, если запрос поступает с мобильного устройства.

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

function init() {

    if(isMobile()) {
        document.write('<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css'; return false;" />');
document.write('<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>');
dcument.write('<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>');
    }
}


function isMobile() {

    if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/IEMobile/i))
            return true;
        return false;
}

ОТВЕТЫ

Ответ 1

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

  1. Использовать скрипт для обнаружения с http://detectmobilebrowsers.com/
  2. Тест с использованием http://yepnopejs.com/

Как это (должен работать для сценария jQuery с http://detectmobilebrowsers.com/):

yepnope({
  test : jQuery.browser.mobile,
  yep  : 'mobile_specific.js',
  nope : ['normal.js','blah.js']
});

РЕДАКТИРОВАТЬ:

Также посмотрите на https://github.com/borismus/device.js для загрузки контента на основе условий. Я не уверен, что это позволит вам загружать условные JS файлы.

Ответ 2

Как насчет определения того, следует ли использовать мобильный макет на основе ширины устройства, например CSS-фреймворки, такие как Twitter Bootstrap? Таким образом, вы можете создавать небольшие устройства с помощью jQuery mobile и для других с vanilla jQuery? Я думаю, что тестирование с помощью yepNope или аналогичного приложения по-прежнему применяется.