根據設備加載HTML內容的最佳方式是什麼？

我有兩個不同的div元素（一個用於桌面和其他移動），必須根據訪問我的網站的設備加載。做這個的最好方式是什麼？我不想檢查用戶代理，因爲它經常更新。根據設備加載HTML內容的最佳方式是什麼？

現在我正在使用CSS媒體查詢來查找設備規格並隱藏/顯示相應的div。問題是，我正在加載這兩個div，而不考慮設備。我只想加載相應的div。

此外，重新調整桌面瀏覽器到移動大小的大小應該加載移動div。做這個的最好方式是什麼？

謝謝。

來源

2014-12-08 drunkenfist

如果您不知道哪些設備正在看網頁，則無法加載相應的div ...（您只能使用用戶代理或http://mobiledetect.net/顯示並隱藏某些庫（在我看來） – MartaGom 2014-12-08 09:33:05

可以在您的項目中使用JavaScript嗎？ – naota 2014-12-08 09:34:53

@naota是的，我使用的是JavaScript。 – drunkenfist 2014-12-08 09:46:50

如果你可以使用JavaScript（和jQuery），你可以管理加載基於設備寬度的內容。其基本思路是這樣的：

的index.html

<body> 
    <div id="content"> 
     <!-- content will be loaded here based on the width of the devise --> 
    </div> 
</body>

phone.html

<div> 
     This file is for small devices 
</div>

pc.html：index.html中

<div> 
     This file is for large devices 
</div>

的JavaScript：

function loadcontent(){ 
    var BreakPoint = 480; // pixcel 

    if($(window).width() < BreakPoint){ 
     file = "phone.html"; 
    }else{ 
     file = "pc.html"; 
    } 
    $("#content").load(file); 
} 

loadcontent(); 

$(window).resize(function() { 
    .... 
    loadcontent(); 
    .... 
});

上面的代碼只是基本的概念。要順利處理window.resize事件，有幾個功能需要執行。如果您想查看該部分的代碼，我會更新我的答案。

希望這有助於。

來源

2014-12-08 10:02:28 naota

根據設備加載HTML內容的最佳方式是什麼？

回答

相關問題