运行特定 window 宽度的特定脚本

Question

我需要根据实际浏览器宽度为字段类添加 "disabled" 状态。

以下解决方案效果很好，但您需要触摸浏览器宽度才能在页面重新加载后使其正常工作。

<script>
$(window).resize(function(){

        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }
        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
});
</script>

是否可以转换此脚本，使其每次仅在页面重新加载后启动？

Answer 1

使用 $(document).ready() 而不是 $(window).resize()。

<script>
    $(document).ready(function(){
        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }

        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
    });
</script>

这只会在页面加载时运行一次。

如果您没有使用 jQuery，您可以使用 window.onload。

Read more about it here.

<script>
    window.onload = function(){
        if(window.innerWidth < 768) {
            $('.mobile-hidden').prop('disabled', true);
        }

        if(window.innerWidth > 768) {
            $('.mobile-hidden').prop('disabled', false);
        }
    }
</script>

Answer 2

将此放入您的 header

 <script>
     $(window).resize(function(){
     $('.mobile-hidden').prop('disabled', true);
     }
 </script>

运行特定 window 宽度的特定脚本

Run specific script on certain window width

html

javascript

resize

window-resize

运行 特定 window 宽度的特定脚本

Run specific script on certain window width

html

javascript

resize

window-resize

运行特定 window 宽度的特定脚本