javascript - jQuery检测屏幕大小变化而不刷新

Question

我有一个基于屏幕大小运行的脚本

if (document.documentElement.clientWidth >= 1024) {//script}

这工作正常，但需要在更改之间刷新，因为这将在移动网站上使用，我需要查看方向是否更改。

我怎样才能在不刷新的情况下检测屏幕大小？

Jsfiddle 演示。

Answer 1

试试这个：

$(window).resize(function() {
    if (document.documentElement.clientWidth >= 1024) {    
        $('div').click(function() {
            $('p').slideToggle();
        });
    }
}).resize()

---

更新：

您可以使用orientationchange事件：

$(window).bind('orientationchange', check);

function check() {
     if (document.documentElement.clientWidth >= 1024) {    
            $('div').click(function() {
                $('p').slideToggle();
            });
     }
}

Answer 2

function calculateHeight(){ 
   //do some calculations

}

calculateHeight();

$(window).resize(function(){
    calculateHeight();  
});

这是你的游戏。在calculateHeight您编写计算代码时，然后运行一次以使所有内容都具有正确的大小。之后 $(windows).resize(); 每次调整窗口大小时都会调用，以便您可以再次计算。

Answer 3

你可以试试 jQuery resize() 方法： http ://api.jquery.com/resize/