Détecter la fenêtre du navigateur Maximisée/Réduite avec Javascript

Question

Lorsque l'utilisateur clique sur les boutons Maximiser/Restaurer Bas ou Réduit du navigateur, existe-t-il un moyen de suivre ces événements avec javascript? Y a-t-il un événement ou une propriété à utiliser?

Je veux que lorsque l'utilisateur clique sur le bouton «maximisé» en haut à droite du navigateur, la page Web doit s'étendre à une largeur spécifique et lorsque le navigateur est en mode redimensionnable, la page Web est redimensionnable.

S'il vous plaît quelqu'un peut-il m'aider dans ce domaine? Cela ne me dérange pas non plus javascript ou jquery.

Merci d'avance.

Answer 1

Il semble que ce que vous voulez, c'est une mise en page qui se redimensionne lorsque le navigateur est redimensionné, mais seulement jusqu'à une largeur maximale.

Si c'est le cas, vous pouvez soit le faire en CSS ou en JavaScript.

Imaginer que votre contenu est dans un élément comme:

<div class="container"> -content here- </div> 

Mon option préférée serait d'utiliser CSS comme suit:

.container{ 
    max-width: 1200px; 
    width: 100%; 
} 

Si vous avez besoin de soutenir IE6 (qui ne support max-width) vous pouvez essayer d'utiliser une expression dans le CSS IE6:

.container{ 
    width:expression(document.body.clientWidth > 1200 ? "1200px" : "100%"); /*IE6*/ 
} 

Si vous souhaitez utiliser Jav ascript: vous pouvez simplement vos éléments en redimensionne l'événement resize de la fenêtre:

$(window).bind('resize', function() { 
    // resize $('.container').width() based on $(window).width() 
}); 

Vous pouvez d'abord déclencher cette logique utilise

$(window).trigger('resize');