Question

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

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

此外，将桌面浏览器的大小调整为移动大小应加载移动div。这样做的最佳方式是什么？

感谢。

Answer 1

如果您可以使用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();
    ....
});

以上代码只是基本概念。要顺利处理window.resize事件，需要实现几个功能。如果您想查看该部分的代码，我会更新我的答案。

希望这会有所帮助。

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

1 个答案: