Utilisation de jQuery pour obtenir la taille de la fenêtre d'affichage

308

Comment utiliser jQuery pour déterminer la taille de la fenêtre du navigateur et pour le redétecter si la page est redimensionnée? J'ai besoin de faire une taille IFRAME dans cet espace (venant un peu sur chaque marge).

Pour ceux qui ne le savent pas, la fenêtre d'affichage du navigateur n'est pas de la taille du document / de la page. C'est la taille visible de votre fenêtre avant le défilement.

jquery resize size viewport Volomike
la source
Avez-vous une idée de la façon d'obtenir la zone visible sur l'écran des appareils, et pas seulement à quoi faire défiler? Je vois $ (fenêtre) .height () renvoyant toute la largeur du document, pas la partie qui est agrandie. Je veux savoir quelle quantité est visible après l'application du zoom.
Frank Schwieterman
appelsiini.net/projects/viewport Cela devrait le faire! :)
Mackelito
1
Ce n'est pas une réponse directe à la question, mais peut être pratique pour ceux qui souhaitent manipuler les sélecteurs en fonction de leur position et visibilité par rapport à la fenêtre d' affichage : appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Réponses:

484

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

});
SimaWB
la source
18
J'ai testé cela sur Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 et Safari 5.0 (7533.16). Cela fonctionne de manière cohérente sur tous ces éléments. J'ai également testé FF3.6.3 sur Ubuntu et cela fonctionne aussi là-bas. Je pense que j'utilise jQuery 1.3 avec WordPress 2.9.2, c'est là que j'avais besoin de cela pour fonctionner.
Volomike
48
Avez-vous une idée de la façon d'obtenir la zone visible sur l'écran des appareils, et pas seulement à quoi faire défiler? Je vois $ (fenêtre) .height () renvoyant toute la largeur du document, pas la partie qui est agrandie. Je veux savoir quelle quantité est visible après l'application du zoom.
Frank Schwieterman
9
En fait, innerWidth/ innerHeightest plus correct à utiliser (couvrant le zoom).
18
@FrankSchwieterman Peut-être que votre navigateur ne se comporte pas comme vous le souhaitez: peut-être que vous rencontrez ce problème: stackoverflow.com/q/12103208/923560 . Assurez-vous que votre fichier HTML comprend une DOCTYPEdéclaration appropriée , par exemple <!DOCTYPE html>.
Abdull
21
C'est complètement faux. Cela vous donne la taille du document, pas la fenêtre d'affichage (la taille de la fenêtre sur le document).
Mike Bethany
26

1. Réponse à la question principale

Le script $(window).height()fonctionne bien (montrant la hauteur de la fenêtre d'affichage et non le document avec une hauteur de défilement), MAIS il a besoin 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 celui qui $(window).height()prend la hauteur du document et non la hauteur du navigateur. Avec la spécification doctype, elle est résolue de manière satisfaisante, et je suis sûr que vos peps éviteront de "changer le débordement de 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 le documenter sur le code pour une utilisation future par le programmeur.

2. Un conseil supplémentaire, notez à côté: De plus, si vous faites un script, vous pouvez inventer des tests pour aider les programmeurs à utiliser vos bibliothèques, permettez-moi d'en inventer quelques-uns:

$ (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 à côté": @Machiel, dans le commentaire d'hier (2014-09-04), était TOTALement raison: le chèque du $ ne peut pas être à l'intérieur de l'événement prêt de Jquery, parce que nous supposons, comme il l'a souligné, que $ est déjà défini. MERCI D'AVOIR INDIQUÉ CELA, et veuillez faire plaisir au reste d'entre vous, corrigez cela, si vous l'avez utilisé dans vos scripts. Ma suggestion est: dans vos bibliothèques, mettez une fonction "install_script ()" qui initialise la bibliothèque (mettez toute référence à $ à l'intérieur de cette fonction init, y compris la déclaration de ready ()) et AU DÉBUT de cette fonction "install_script ()" , vérifiez si le $ est défini, mais rendez tout indépendant de JQuery, afin que votre bibliothèque puisse se "diagnostiquer" lorsque 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 en l'apportant à partir d'un CDN. Ce sont de minuscules notes de côté pour aider d'autres programmeurs. Je pense que les gens qui font des bibliothèques doivent être plus riches dans les retours sur les erreurs des programmeurs potentiels. Par exemple, Google Apis a besoin d'un manuel supplémentaire 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 alliez chercher un manuel ou une spécification. La bibliothèque doit être AUTO-DOCUMENTEE. J'écris du code même en prenant soin des erreurs que je pourrais commettre dans six mois à partir de maintenant, et il essaie toujours d'être un code propre et non répétitif, déjà écrit pour éviter les futures erreurs de développement. Je pense que les gens qui font des bibliothèques doivent être plus riches dans les retours sur les erreurs des programmeurs potentiels. Par exemple, Google Apis a besoin d'un manuel supplémentaire 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 alliez chercher un manuel ou une spécification. La bibliothèque doit être AUTO-DOCUMENTEE. J'écris du code même en prenant soin des erreurs que je pourrais commettre dans six mois à partir de maintenant, et il essaie toujours d'être un code propre et non répétitif, déjà écrit pour empêcher les futures erreurs de développement. Je pense que les gens qui font des bibliothèques doivent être plus riches dans les retours sur les erreurs des programmeurs potentiels. Par exemple, Google Apis a besoin d'un manuel supplémentaire 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 alliez chercher un manuel ou une spécification. La bibliothèque doit être AUTO-DOCUMENTEE. J'écris du code même en prenant soin des erreurs que je pourrais commettre dans six mois à partir de maintenant, et il essaie toujours d'être un code propre et non répétitif, déjà écrit pour empêcher les futures erreurs de développement. Vous n'avez pas besoin d'aller chercher un manuel ou une spécification. La bibliothèque doit être AUTO-DOCUMENTEE. J'écris du code même en prenant soin des erreurs que je pourrais commettre dans six mois à partir de maintenant, et il essaie toujours d'être un code propre et non répétitif, déjà écrit pour empêcher les futures erreurs de développement. Vous n'avez pas besoin d'aller chercher un manuel ou une spécification. La bibliothèque doit être AUTO-DOCUMENTEE. J'écris du code même en prenant soin des erreurs que je pourrais commettre dans six mois à partir de maintenant, et il essaie toujours d'être un code propre et non répétitif, déjà écrit pour empêcher les futures erreurs de développement.

David L
la source
2
Il est très difficile de lire votre message. Veuillez refaire votre message afin de vous habituer au Markdown StackExchange comme tout le monde. Il y a une raison pour laquelle les sites StackExchange n'utilisent pas TinyMCE , mais si vous avez un problème avec cela, impliquez-vous dans le Meta .
Volomike
C'est un peu bizarre que vous vérifiiez la disponibilité $après avoir déjà utilisé le $pour appeler $(document).ready(function() { } );. C'est bien si vous vérifiez si jQuery est disponible, mais à ce stade, il est déjà trop tard.
Machiel
@Machiel, vous avez tout à fait raison. Heureusement, je suis juste allé vérifier mes scripts et ils n'utilisent pas l'événement ready. Oui, merci, je me sentais stupide lorsque vous avez dit cela, mais heureusement, je viens de vérifier que dans mes scripts, la vérification se trouve à l'intérieur d'une fonction appelée "install_this_script ()", et dans une telle installation j'appelle la fonction init de la bibliothèque, mais avant cela, je vérifie (OUTSIDE JQUERY) si l'objet $ est défini ou non. MERCI DE TOUTE FAÇON, frère, vous m'avez vraiment fait flipper! Je crains que ce message ne soit resté ici trop longtemps, j'espère que cette erreur n'a pas fait beaucoup de mal aux autres lecteurs. J'ai corrigé le post.
David L
Cela devrait être la vraie réponse! Merci!
Justin T. Watts du
6

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

jQuery n'a aucune fonction pour détecter de manière cohérente la largeur et la hauteur correctes de la fenêtre [1] lorsqu'une barre de défilement est présente.

J'ai trouvé une solution qui utilise la bibliothèque Modernizr et en particulier la fonction mq qui ouvre les requêtes multimédias 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 fenêtre de 100% avec une marge de chaque côté, mais j'espère que cela apportera un réconfort aux développeurs Web frustrés par l'incohérence du navigateur quant au calcul de la largeur et de la hauteur de la fenêtre de visualisation javascript.

Cela pourrait peut-être 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 déconseille cette méthode car elle reposerait sur le reniflement de l'agent utilisateur.

Habituellement, les différents navigateurs ne sont pas cohérents quant à 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

forsvunnet
la source
4 
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);
    });
AnuRaj
la source
L'utilisation de $ (window) .height () ne vous donnera pas la taille de la fenêtre d'affichage, elle vous donnera la taille de la fenêtre entière, qui est généralement la taille du document entier bien que le document puisse être encore plus grand.
AnuRaj
idéal pour la largeur!
Marc
2

Pour obtenir la taille de la fenêtre d'affichage au chargement et au redimensionnement (basé sur la réponse de SimaWB):

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

getViewport();

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

Veuillez noter que les unités de fenêtre CSS3 (vh, vw) ne fonctionneraient pas bien sur iOS Lorsque vous faites défiler la page, la taille de la fenêtre est en quelque sorte recalculée et votre taille d'élément qui utilise des unités de fenêtre augmente également. Donc, en fait, un peu de javascript est requis.

DAH
la source