-1

I want to use @media to "hide" some block elements from the desktop version to mobile, so the "hidden" elements won't eat traffic.

This "block elements" will obviously contain many data, including images, inline block elements, block elements etc. All this should not downloaded in the mobile version. And well, I'm wondering if it's possible to achieve this with the @media rule. As far as I can tell, the display: none doesn't solve this problem, but perhaps I'm wrong.

P.S. code example:

<div class="desktop">
 ...
 <div ... > ... </div>
 <span ... > ... </span>
 ...
</div>
<div class="mobile">
 ...
 <div ... > ... </div>
 <span ... > ... </span>
 ...
</div>

@media (max-width:799px){
  .desktop { display: none; }
}
@media (min-width:800px){
  .mobile { display: none; }
}
bogiwa
  • 1
  • 2
  • Can I see the code which you want to hide including a jsFiddle link with the code in issue? – Nitesh May 30 '16 at 09:28
  • Thanks for down-voting without a reason :) – bogiwa May 30 '16 at 09:28
  • Nathan L, it can be really anything. But I don't mind to give an example, sure – bogiwa May 30 '16 at 09:29
  • Have you added in your header of the html class? If not check this post: http://stackoverflow.com/questions/7859336/css3-media-queries-not-working – jelleB May 30 '16 at 09:42
  • sure I did. it's not about that `@media` not working, it works perfectly. It's about hiding some elements with it, so it won't eat bandwidth – bogiwa May 30 '16 at 09:51
  • You should use JQuery or Javascript to generate the HTML parts on mobile or desktop, see the answer on this post : http://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query – Pascal Goldbach May 30 '16 at 09:53
  • Your code should works well. Do you have a particular HTML that produces the behaviour that you explain in your question? – Francisco Romero May 30 '16 at 09:56
  • Pascal... What? How is this question related to what was discussed in the link you provided? – bogiwa May 30 '16 at 09:59
  • Error404, it's not pal. I mean look at here for example: http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading I'm not the only one with this problem... Moreover, I'm not looking for just to prevent img from loading, but everything else too – bogiwa May 30 '16 at 10:00
  • @bogiwa It was too difficult to explain in only a few words, so I gave an answer, I hope my answer will help you. – Pascal Goldbach May 30 '16 at 11:31

1 Answers1

0

Elements are loaded even with a display:none (they are loaded but not displayed), you could use JQuery to generate some parts of your website:

$( document ).ready(function() {
  if (window.matchMedia('(max-width: 767px)').matches) {
        $("#mobile" ).html("mobile!");
    } else {
         $("#desktop" ).html("desktop!");
    }
 });
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width" />
</head>

<div id="mobile"></div>
<div id="desktop"></div>

On mobile the HTML code would looks like this :

<div id="mobile">Mobile!</div>
<div id="desktop"></div>

On Desktop like this :

<div id="mobile"></div>
<div id="desktop">Desktop</div>

I don't know if there's a better solution, but I hope my answer will help you.

Pascal Goldbach
  • 977
  • 1
  • 15
  • 34