如何仅在具有一定宽度的屏幕上显示 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
}

logical AND (&&)

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

}

如何仅在具有一定宽度的屏幕上显示 JS

How to show only on screen with certain width JS

javascript

document

screen