2012-01-06 14 views
1

jQuery Mobileを特定の画面解像度のページにのみ読み込ませる方法は誰も知りませんか? HTML5 Boilerplateを使用したいので、誰かがデスクトップ/ラップトップブラウザからページを表示している場合、jQuery Mobileをロードしたくありません。jQuery MobileとHTML5の定型文

たとえば、誰かが自分のiPhoneから自分のページを訪れた場合、自分が作成したテーマでjQuery Mobileをフォーマットしてもらいたいのですが、デスクトップから見るとjQuery Mobileはすべてを追加したくありません余分なタグやもの。

おかげ

答えて

4
<script type="text/javascript"> 
<!-- 

var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", "js/jqueryMobile.js") 

if (screen.width <= 480) { 
document.getElementsByTagName("head")[0].appendChild(fileref); 
} 
//--> 
</script> 
+0

ありがとう、David。これはまさに私が探していたものです! – user965879

1
<script type="text/javascript"> 
    <!-- 
    if (screen.width <= 699) { 
    document.location = "mobile/index.html"; 
    } 
    //--> 
</script> 

スクリプトのこの作品は、この場合では699ピクセル、画面サイズを認識し、その後、ルートとは別のフォルダをロードするためにサーバーを教えてくれます。あなたのjqueryモバイルサイトのためにmobileという名前のサーバにフォルダを作成してください。乾杯!

+0

おかげで、デビッドが、それは私は2つの別々のサイトを管理しなければならないわけではないでしょう:1)モバイル、2)標準?私はちょうど1つのサイトを管理したいと思いますが、ブラウザの幅が480px以下であれば、jQuery Mobileが読み込まれます。そうでなければ、ロードする必要はありません。 – user965879

+0

@ user965879新しい投稿や投稿方法の知らないことについて申し訳ありません。私はあなたがしたいことを誤解しました。私は同じif文に基づいてあなたのヘッダーにスクリプトタグを追加する以下の別の答えを追加しました。 – Davidicus

0

jQMドキュメント:

注:この機能はベータ版で非推奨と1.0rc1で削除されました。 では、代わりにCSS3 Media Queriesを使用することをお勧めします。古いバージョンのInternet Explorerの をサポートするには、の高速&軽量 最小/最大幅CSS3 Media Queries用のpolyfillを確認してください。

あなたはまだこの機能が必要な場合は、ここにコードを見つけることができます。 jquery.mobile.media.classes.js

関連する問題