Question

有没有办法检测用户何时调整屏幕大小低于某个宽度和高度，并显示带有消息的div（在div中），说窗口太小而无法正确显示页面？

Answer 1

var resizeTimer;

function nagOnResize() {
    //pause for 1/4 of a second to see if the window stopped moving
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doNagOnResize, 250);
}

function doNagOnResize() {
    $(window).unbind('resize', nagOnResize); //pause the event
    var h = $(window).height(), w = $(window).width();
    if(w < 300) {
        alert("< 300px wide");
    }
    $(window).resize(nagOnResize); //continue the event
};

$(window).resize(nagOnResize);

实例：http://jsfiddle.net/FWhgT/

Answer 2

您应该执行类似

的操作

var nagOnResize = function() {
    var h = $(window).height(), w = $(window).width();
    // change the condition as needed
    if(w < 300) {
        // make it $("#nag").show(); if you want
        alert("< 300px wide");
    }
    // Recursive call. Not binding to $(window).resize as it's fired way too many times on some browsers
    setTimeout(nagOnResize, 100);
};

nagOnResize();

现场演示：http://jsfiddle.net/ajVpG/1/（减少浏览器宽度以使结果iframe <300px）

确定屏幕是否太小而无法显示页面

2 个答案: