web-dev-qa-db-fra.com

Utilisation de jQuery pour obtenir la taille de la fenêtre

Comment utiliser jQuery pour déterminer la taille de la fenêtre de visualisation du navigateur et la redétecter si la page est redimensionnée? Je dois faire une taille IFRAME dans cet espace (en entrant un peu sur chaque marge).

Pour ceux qui ne le savent pas, la fenêtre du navigateur n’a pas la taille du document/de la page. C'est la taille visible de votre fenêtre avant le parchemin.

jqueryresizesizeviewport
303
Volomike

Pour obtenir la largeur et la hauteur de la fenêtre:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

redimensionner l'événement de la page:

$(window).resize(function() {

});
479
SimaWB

Vous pouvez essayer viewport units (CSS3):

div { 
  height: 95vh; 
  width: 95vw; 
}

support du navigateur

39
Vitalii Fedorenko

1. Réponse à la question principale

Le script $(window).height() fonctionne correctement (affiche la hauteur de la fenêtre d'affichage et non le document avec une hauteur de défilement), MAIS il est nécessaire que vous placiez correctement la balise doctype dans votre document, par exemple ces doctypes:

Pour HTML 5:

<!DOCTYPE html>

Pour HTML4 de transition:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le doctype par défaut supposé par certains navigateurs est probablement tel que $(window).height() prend la hauteur du document et non celle du navigateur. Avec la spécification doctype, elle est résolue de manière satisfaisante, et je suis sûr que vos peps éviteront le "changement de défilement-défilement en caché, puis en arrière", ce qui est, je suis désolé, un truc un peu sale, surtout si vous ne le faites pas. t documentez-le sur le code pour une utilisation future par le programmeur.

2. Un conseil supplémentaire, notez à part: De plus, si vous faites un script, vous pouvez inventer des tests pour aider les programmeurs à utiliser vos bibliothèques, laissez-moi en inventer un couple:

$ (document) .ready (fonction () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

EDIT: à propos de la partie 2, "Un conseil supplémentaire, notez à part": @Machiel, dans son commentaire d'hier (2014-09-04), était tout à fait à droite: le chèque de $ ne peut pas être dans l'événement ready de Jquery, car comme il l'a fait remarquer, nous supposons que $ est déjà défini. MERCI DE SIGNALER CELUI-CI ET, s'il vous plaît, corrigez ceci, si vous l'avez utilisé dans vos scripts. Ma suggestion est la suivante: dans vos bibliothèques, insérez une fonction "install_script ()" qui initialise la bibliothèque (mettez toute référence à $ dans cette fonction init, y compris la déclaration de ready ()) et AT LE DÉBUT de cette Fonction "install_script ()", vérifie si le $ est défini, mais rend tout indépendant de JQuery, afin que votre bibliothèque puisse se "diagnostiquer" quand JQuery n’est pas encore défini. Je préfère cette méthode plutôt que de forcer la création automatique d'un JQuery à partir d'un CDN. Ce sont des notes minuscules à part pour aider d'autres programmeurs. Je pense que les personnes qui fabriquent des bibliothèques doivent être plus riches en informations sur les erreurs des programmeurs potentiels. Par exemple, Google Apis a besoin d’un manuel spécifique pour comprendre les messages d’erreur. C'est absurde, d'avoir besoin d'une documentation externe pour quelques petites erreurs qui ne nécessitent pas que vous cherchiez un manuel ou une spécification. La bibliothèque doit être auto-documentée. J'écris du code même en prenant soin des erreurs que je pourrais commettre, même dans six mois, et il essaye toujours d'être un code propre et non répétitif, déjà écrit pour prévenir les erreurs des futurs développeurs.

25
David L

Vous pouvez utiliser $ (window) .resize () pour détecter si la fenêtre est redimensionnée.

jQuery n'a aucune fonction permettant de détecter de manière cohérente la largeur et la hauteur correctes de la fenêtre d'affichage [1] en présence d'une barre de défilement.

J'ai trouvé une solution qui utilise la bibliothèque Modernizr et plus particulièrement la fonction mq qui ouvre les requêtes multimédia pour javascript.

Voici ma solution:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Ma réponse n’aidera probablement pas à redimensionner une iframe à une largeur de viewport de 100% avec une marge de chaque côté, mais j’espère qu’elle offrira un réconfort aux développeurs Web frustrés par l’incohérence du navigateur pour le calcul de la largeur et de la hauteur de la fenêtre d’affichage javascript.

Peut-être que cela pourrait aider en ce qui concerne l'iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Vous pouvez utiliser $ (window) .width () et $ (window) .height () pour obtenir un nombre qui sera correct dans certains navigateurs, mais incorrect dans d'autres. Dans ces navigateurs, vous pouvez essayer d'utiliser window.innerWidth et window.innerHeight pour obtenir la largeur et la hauteur correctes, mais je vous déconseille cette méthode car elle s'appuierait sur le sniffing de l'agent utilisateur.

Généralement, les différents navigateurs ne sont pas cohérents sur l’inclusion ou non de la barre de défilement dans la largeur et la hauteur de la fenêtre.

Remarque: $ (window) .width () et window.innerWidth varient selon les systèmes d'exploitation utilisant le même navigateur. Voir: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

5
forsvunnet
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
2
AnuRaj

Pour obtenir la taille de la fenêtre d'affichage sur charge et sur redimensionner (en fonction de la réponse SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
1
SandroMarques

Veuillez noter que les unités de la fenêtre d'affichage CSS3 (vh, vw) ne fonctionnent pas correctement sur iOS. Lorsque vous faites défiler la page, la taille de la fenêtre d'affichage est recalculée et la taille de l'élément qui utilise les unités de la fenêtre d'affichage augmente également. Donc, javascript est requis.

1
D.A.H