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

Question

Suppose on one page, I have want to show a template in two version depending on the user's device.

For example, I implemented the following code.

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

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

This works okay with media queries but with javascript, I realized that $('body') actually returns both objects. Although the user doesn't see the element because .desktop is set to display:none on mobile deviecs, it seems that the html elements are rendered. In this case, is it still an okay practice or should I avoid doing something like this?

Refer [Multiple in same file](http://stackoverflow.com/questions/2035462/multiple-htmlbody-html-body-in-same-file) — Akshay Gundewar, Apr 18 '15 at 18:43
A hidden element is still part of DOM. You can use `$("body:visible")` to target the visible element (but fix the double-body issue first). — Salman A, Apr 18 '15 at 18:45

score 0 · Accepted Answer · answered Apr 18 '15 at 18:49

As for me, this is not very good practice. Because you have 2 elements on page, which browser will render. And for him ( browser ) it doesn't meter, visible this element or not. Your media query from css can do all the same things on one element. And it will be faster. Or use server side to understand what kind of template you should show - mobile or desktop.

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

1 Answers1