Déterminer si l'écran devient trop petit pour afficher la page

Question

Y at-il un moyen de détecter lorsque l'utilisateur redimensionne l'écran en dessous d'une certaine largeur et hauteur et afficher une div avec un message (dans un div) indiquant que la fenêtre est trop petit pour afficher correctement la page?

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); 

exemple en direct: http://jsfiddle.net/FWhgT/

Answer 2

Vous devriez faire quelque chose comme

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(); 

démo en direct: http://jsfiddle.net/ajVpG/1/ (Diminution largeur du navigateur pour rendre le résultat iframe < 300px)