Как показать только на экране определенной ширины JS

Question

Я использую следующий код

Экран больше 999 пикселей

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

Экран меньше 767 пикселей

<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

}