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

StackOverflow https://stackoverflow.com/questions/3044573

  •  27-09-2019
  •  | 
  •  

Question

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

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

Était-ce utile?

La solution

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

});

Autres conseils

Tu peux essayer unités de fenêtre (CSS3):

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

Support du navigateur

1. Réponse à la question principale

Le scénario $(window).height() Fonctionne bien (montrant la hauteur de la fenêtre et non le document avec une hauteur de défilement), mais il faut que vous mettiez correctement la balise Doctype dans votre document, par exemple ces doctypes:

Pour HTML 5:

<!DOCTYPE html>

Pour HTML4 transitionnel:

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

Probablement le doctype par défaut supposé par certains navigateurs est tel, que $(window).height() prend la hauteur du document et non la hauteur du navigateur. Avec la spécification doctype, il est résolu de manière satisfaisante, et je suis sûr que vous éviterez le "changeur de défilement à cacher puis le dos", c'est-à-dire, je suis désolé, un peu sale, spécialement si vous ne le faites pas T Documentez-le sur le code pour l'utilisation du futur programmeur.

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

$ (document) .ready (function () {

      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, note à part": @machiel, dans le commentaire d'hier (2014-09-04), était tout à fait juste: le chèque du $ ne peut pas être à l'intérieur de l'événement prêt de jQuery, car Nous sommes, comme il l'a souligné, en supposant que $ est déjà défini. Merci d'avoir signalé cela et faites-le, s'il vous plaît, les autres lecteurs corrigent ceci, 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 n'importe quelle référence à $ dans une telle fonction d'init, y compris la déclaration de ready ()) et au début de cette fonction "instmt_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 la produisant d'un CDN. Ce sont de minuscules notes à part pour aider d'autres programmeurs. Je pense que les gens qui fabriquent des bibliothèques doivent être plus riches dans les commentaires des erreurs du programmeur potentiel. Par exemple, les API Google ont besoin d'un manuel de côté pour comprendre les messages d'erreur. C'est absurde, avoir besoin d'une documentation externe pour de minuscules erreurs qui n'ont pas besoin que vous alliez chercher un manuel ou une spécification. La bibliothèque doit être auto-documentée. J'écris le code même en prenant soin des erreurs que je pourrais commettre même dans six mois, et il essaie toujours d'être un code propre et non rééquilibré, déjà rédigé-future-développant.

Vous pouvez utiliser $ (fenêtre) .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 correctement de la fenêtre [1] lorsqu'il y a une barre de défilement présente.

J'ai trouvé une solution qui utilise la bibliothèque Modernizr et spécifiquement 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 un iframe à une largeur de fenêtre à 100% avec une marge de chaque côté, mais j'espère qu'elle fournira un réconfort pour les développeurs Web frustrés par l'incohérence du navigateur de la largeur de la fenêtre JavaScript et du calcul de la hauteur.

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 $ (fenêtre) .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 conseillerais contre cette méthode car elle s'appuierait sur le reniflement de l'agent utilisateur.

Habituellement, les différents navigateurs sont incohérents quant à savoir s'ils incluent ou non la barre de défilement dans le cadre de la largeur et de la hauteur de la fenêtre.

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

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

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

Pour obtenir la taille de la fenêtre charger et sur redimensionner (Basé sur 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()
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top