jQuery Mobile和HTML5 Boilerplate

有誰知道一種方法可以讓jQuery Mobile僅在具有特定屏幕分辨率的頁面上加載嗎？如果有人從桌面/筆記本瀏覽器查看頁面，我不希望jQuery Mobile加載，因爲我想使用HTML5 Boilerplate。例如，如果有人從他們的iPhone訪問我的頁面，我希望jQuery Mobile使用我創建的主題格式化網站，但是如果他們從他們的桌面查看它，我不希望jQuery Mobile將全部額外的標籤和東西。jQuery Mobile和HTML5 Boilerplate

由於

來源

2012-01-06 user965879

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

來源

2012-01-06 20:57:11 Davidicus

謝謝大衛。這正是我所期待的！ – user965879 2012-01-06 21:37:02

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

這塊腳本將認識到，屏幕大小，在這種情況下699像素，然後將告訴服務器加載不同的文件夾的根目錄的。只需在您的jquery移動網站名爲mobile的服務器上創建一個文件夾即可。乾杯！

來源

2012-01-06 17:06:09 Davidicus

謝謝，大衛，但不會意味着我將不得不管理兩個獨立的網站：1）手機，2）標準？我只想管理一個站點，但是當瀏覽器寬度爲480px或更低時，它將加載jQuery Mobile，否則我不會'加載它。 – user965879 2012-01-06 19:05:04

@ user965879對於新的和不知道如何發佈感到抱歉。我誤解了你想要做的事情。我在下面添加了另一個答案，它將基於相同的if語句向您的標題添加腳本標記。 – Davidicus 2012-01-06 21:05:09

JQM文件：

http://jquerymobile.com/test/docs/api/mediahelpers.html

注：此功能被廢棄了測試版，並在1.0rc1刪除。我們建議使用CSS3媒體查詢。要支持Internet Explorer的舊版本，請查看respond.js，快速&輕量級填充最小/最大寬度CSS3媒體查詢。

如果您仍需要此功能，您可以在這裏找到代碼： jquery.mobile.media.classes.js

來源

2012-01-06 17:50:54

jQuery Mobile和HTML5 Boilerplate

回答

相關問題