基于设备加载HTML内容的最佳方式是什么？_Html_Css

基于设备加载HTML内容的最佳方式是什么？

html css

基于设备加载HTML内容的最佳方式是什么？,html,css,Html,Css,我有两个不同的div元素（一个用于桌面，另一个用于移动设备），必须根据访问我的网站的设备加载。最好的方法是什么？我不想检查用户代理，因为它经常更新现在我正在使用css媒体查询查找设备规格并隐藏/显示相应的div。问题是，我正在加载这两个div，而不考虑设备。我只想加载相应的div 此外，将桌面浏览器的大小重新调整为移动设备的大小应该加载移动设备div。这样做的最佳方法是什么谢谢。如果您可以使用JavaScript（和jQuery），您可以根据设备的宽度加载内容。基本思想如下： index.h

我有两个不同的div元素（一个用于桌面，另一个用于移动设备），必须根据访问我的网站的设备加载。最好的方法是什么？我不想检查用户代理，因为它经常更新

现在我正在使用css媒体查询查找设备规格并隐藏/显示相应的div。问题是，我正在加载这两个div，而不考虑设备。我只想加载相应的div

此外，将桌面浏览器的大小重新调整为移动设备的大小应该加载移动设备div。这样做的最佳方法是什么

谢谢。

如果您可以使用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：

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


此文件适用于大型设备

index.html中的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();
    ....
});

函数loadcontent（）{
var断点=480；//pixcel
if（$（窗口）.width（）<断点）{
file=“phone.html”；
}否则{
file=“pc.html”；
}
$（“#内容”）.load（文件）；
}
loadcontent（）；
$（窗口）。调整大小（函数（）{
....
loadcontent（）；
....
});

以上代码只是基本概念。要顺利处理

窗口。调整大小

事件，有几个功能需要实现。如果您想查看该部分的代码，我将更新我的答案

希望这有帮助。

如果您不知道哪些设备正在查看web，则无法加载相应的div。。。（您只能通过使用用户代理或类似于“显示和隐藏”之类的库以及medie查询了解这一点，这可能是一个不错的选择。）您的项目可以使用JavaScript吗？@naota是的，我正在使用JavaScript。您可以自己管理所有这些，但我会为它选择一个框架。搜索twitter引导，或通过google.Goodluck搜索twitter引导替代方案。最好的方法是检测服务器端的设备，以决定渲染哪个视图。有许多AP我有空。