根据浏览器大小在 <noscript> 之间切换答案

【问题标题】：Switch between <noscript> in function of browser size根据浏览器大小在 <noscript> 之间切换
【发布时间】：2014-02-25 12:00:34
【问题描述】：

我想根据浏览器大小在 noscript 标签之间切换。我发现这个 article 解释了如何在没有 noscript 标签的情况下实现这一点。

如有必要，css 媒体查询将显示 noscript 标签。另一件事是，即使启用了 javascript，css 也会显示，不是吗？

禁用javascript时显示内容的好方法吗？

这是我的代码：

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

【问题讨论】：

标签： javascript html media-queries noscript

【解决方案1】：

您可以使用响应式 css 和 html 来做到这一点。

使用js是错误的，因为如果不支持就不会执行！

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>

【讨论】：