根据设备加载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内容的最佳方式是什么？

回答

相关问题