web-dev-qa-db-ja.com

モバイルデバイス専用のJQueryMobileスクリプトをロードする

モバイルデバイスで正しく表示する必要があるWebページがあります。そのために、ページの先頭にJQueryMobileスクリプトをロードしました。ヘッドタグは次のようになります。

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

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <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>

また、ページの本文要素で、データロール属性を使用して物事を表示します。ページはモバイルデバイスでは非常に見栄えがしますが、リクエストがモバイル以外のブラウザから送信された場合でも同様に見えます。

リクエストがモバイルデバイスからのものである場合にのみ、JQueryMobileスクリプトをロードする方法を誰かが知っているかどうかを知りたいです。

私がこれまでに試したことは、ユーザーエージェントを検出し、モバイルデバイスの場合はスクリプトをロードする関数を使用することです。

function init() {

    if(isMobile()) {
        document.write('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />');
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;
}
javascriptmobilejquery-mobile
12
giocarmine

お使いのデバイスがモバイルかタブレットか、タッチで大画面かを検出するのは難しいですが、最初は

  1. スクリプトを使用して http://detectmobilebrowsers.com/ から検出
  2. http://yepnopejs.com/ を使用してテストします

このように（ http://detectmobilebrowsers.com/ からのjQueryスクリプトで機能するはずです）：

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

編集：

条件に基づいてコンテンツを読み込むには、 https://github.com/borismus/device.js もご覧ください。条件付きJSファイルをロードできるかどうかはわかりません。

14
Nachiket

TwitterなどのCSSフレームワークのように、デバイスの幅に基づいてモバイルレイアウトを使用するかどうかを決定するのはどうですか？Bootstrap do？ ？yepNopeなどを使用したテストは引き続き適用されると思います。

2
savolai ᯓ