如何僅在具有特定寬度 JS 的屏幕上顯示

Question

我正在使用以下代碼

屏幕更大 999px

<script>
    if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) >= 999) {
        // Show on screens bigger than 999px
    }
</script>

屏幕小於 767px

<script>
    if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 767) {
        // Show on screens smaller than 767px
    }
</script>

現在我的目標是顯示介於 970 和 768 之間的東西

我嘗試了以下代碼，但這在 767px 以下也可見

<script>
    if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) < 970) {
        // Show on screens from 970 till 768
    }
</script>

我該如何設置它只顯示在 970 到 768 的屏幕上？ 我不能使用 CSS。

Answer 1

const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if( width >=768 && width <= 970){
    // do what you need
}

邏輯與 (&&)

Answer 2

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if( width >=768 && width <= 970){
    // Show on screens between 768 and 970 px
}
else if (width < 768){
    // Show on screens smaller than 768px

}
else if (width > 970){
    // Show on screens bigger than 970px
}
else {
   // Show other cases

}