Alterne entre <noscript> em função do tamanho do navegador - javascript, html, media-queries, noscript

Eu gostaria de alternar entre tag noscript em função do tamanho do navegador. Eu achei isto artigo explicando como conseguir isso sem a tag noscript.

Uma consulta de mídia css mostrará as tags noscript, se necessário. A outra coisa é que o css mostrará o mesmo se o javascript estiver habilitado, não é?

É uma boa maneira de mostrar um conteúdo quando o javascript está desativado?

Aqui está o meu código:

<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>

Respostas:

Você pode fazer isso com resposta css e html.

Usando js está errado, porque se não for suportado, não será executado!

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>