12

モバイルデバイスで正しく表示する必要がある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;
}
4

2 に答える 2

14

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

  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ファイルをロードできるかどうかはわかりません。

于 2012-07-05T11:16:55.147 に答える
2

Twitter BootstrapなどのCSSフレームワークのように、デバイスの幅に基づいてモバイルレイアウトを使用するかどうかを決定するのはどうですか？このようにして、jQuery mobileを使用する小さなデバイスや、バニラjQueryを使用する他のデバイス向けに設計できますか？yepNopeなどでのテストはまだ当てはまると思います。

于 2012-10-19T15:37:53.143 に答える