Question

我想在浏览器大小函数的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>

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

在浏览器大小</noscript>的函数中切换<noscript>

1 个答案: