CSS 响应式设计：隐藏不会使页面无法呈现

Question

假设在一个页面上，我想根据用户的设备显示两个版本的模板。

比如我实现了下面的代码

<div class="desktop">
  <body>
    Hi Desktop user
  </body>
</div>

<div class="mobile">
  <body>
    Hi mobile
  </body>
</div>

这适用于媒体查询，但对于 javascript，我意识到 $('body') 实际上 returns 这两个对象。虽然用户看不到该元素，因为 .desktop 在移动设备上设置为 display:none，但似乎呈现了 html 元素。在这种情况下，它仍然是一种好的做法还是我应该避免做这样的事情？

Answer 1

对我来说，这不是很好的做法。因为页面上有 2 个元素，所以浏览器将呈现哪个元素。对于他（浏览器），它不计量，是否可见此元素。来自 css 的媒体查询可以在一个元素上执行所有相同的操作。而且会更快。或者使用服务器端来了解您应该显示哪种模板 - 移动或桌面。

CSS 响应式设计：隐藏不会使页面无法呈现

CSS responsive design: hiding doesn't make a page from rendering

html

javascript

css

responsive-design