Switch between <noscript> in function of browser size

Question

I would like to switch between noscript tag in function of the browser size. I found this article explaining how to achieve that without the noscript tag.

A css media queries will show the noscript tags if necessary. The other thing is that the css will show the even if javascript is enabled, isn't it ?

Is it a good way to show a content when javascript is disabled ?

Here is my code :

<script type="text/javascript">
document.getElementById("noscript-desktop").style.display = "none";
document.getElementById("noscript-tablet").style.display = "none";
document.getElementById("noscript-mobile").style.display = "none";
if (window.matchMedia("only screen and (min-width: 900px)").matches) {
  //show content - browser size > 900px
}else{
  //show other content
}
</script>

<div id="noscript-desktop" style="display:none;">html content</div>
<div id="noscript-tablet" style="display:none;">html content</div>
<div id="noscript-mobile" style="display:none;">html content</div>

Answer 1

You can do it with responsive css and html.

Using js is wrong, because if it is not supported it will not execute!

HTML:

<noscript>
    <div class="mobile">
        Your mobile does not support JavaScript!
    </div>
    <div class="tablet">
        Your tablet does not support JavaScript!
    </div>
    <div class="browser">
        Your browser does not support JavaScript!
    </div>
</noscript>

CSS:

<style>
/* This is browser */
.mobile, .tablet {
    display:none;
}
.browser {
    display:block;
}

/* This is tablet */
@media (max-width:1024px) {
    .tablet {
        display:block;
    }
    .mobile, .browser {
        display:none;
    }
}

/* This is mobile */
@media (max-width:600px) {
    .mobile {
        display:block;
    }
    .tablet, .browser {
        display:none;
    }
}
</style>