Utilisation de jQuery Pour Obtenir la Taille de la Fenêtre d'affichage

Comment faire pour utiliser jQuery pour déterminer la taille de la fenêtre d'affichage du navigateur, et à détecter à nouveau cette si la page est redimensionnée? J'ai besoin de faire un IFRAME taille dans cet espace (à venir en un peu sur chaque marge).

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

Aucune idée de la façon d'obtenir la zone qui est visible sur les appareils de l'écran, et pas seulement ce qu'il peut faire défiler? Je vois $(window).hauteur() pour retourner la totalité de la largeur du document, et non pas la partie qui est en train de zoomer. Je veux savoir combien est visible une fois le zoom est appliqué.
appelsiini.net/projects/viewport Cela devrait le faire! 🙂
Ce n'est pas une réponse directe à la question, mais peut être pratique pour ceux qui veulent manipuler les sélecteurs en fonction de leur position & visibilité par rapport à la fenêtre: appelsiini.net/projects/viewport (plugin)

InformationsquelleAutor Volomike | 2010-06-15

480

Pour obtenir la largeur et la hauteur de la fenêtre d'affichage:
```
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
```
événement de redimensionnement de la page:
```
$(window).resize(function() {

});
```
- J'ai testé cela sur Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opéra 10.53, et Safari 5.0 (7533.16). Cela fonctionne de manière cohérente sur l'ensemble de ces. J'ai aussi testé FF3.6.3 sur Ubuntu et ça fonctionne aussi. Je pense que je suis en utilisant jQuery 1.3 avec WordPress 2.9.2, qui est l'endroit où j'avais besoin de ce travail.
- Aucune idée de la façon d'obtenir la zone qui est visible sur les appareils de l'écran, et pas seulement ce qu'il peut faire défiler? Je vois $(window).hauteur() pour retourner la totalité de la largeur du document, et non pas la partie qui est en train de zoomer. Je veux savoir combien est visible une fois le zoom est appliqué.
- En fait, innerWidth / innerHeight est plus correct d'utiliser (couvrant le zoom).
- Peut-être que votre navigateur n'est pas se comporter de la manière que vous voulez qu'il: peut-être vous exécutez ce problème: stackoverflow.com/q/12103208/923560 . Assurez-vous que votre fichier HTML comprend un DOCTYPE déclaration , par exemple <!DOCTYPE html>.
- Vous me sauver des heures de débogage ! Merci pour votre réponse.
- Il est important de noter que ces valeurs est très inégal entre les navigateurs lorsqu'il y a une barre de défilement dans l'élément que vous êtes en mesure de.
- Ce qui est totalement faux. Cela vous donne la taille du document, pas de la fenêtre d'affichage (de la taille de la fenêtre sur le document).
- c'est la hauteur de la note n'est pas de la fenêtre d'affichage
- et @Toni, $( window ).width() et $( window ).height() retour de la largeur et de la hauteur, respectivement, de la fenêtre d'affichage. $( document ).width() et $( document ).height() retour du document mesures. C'est en fonction de l'API jQuery.
- La Documentation n'est pas toujours droit. Essayez par vous-même.
- Je n'avais vraiment l'essayer pour moi-même dans Firefox 38.0.5 à l'aide de Firebug et il est exact, ou, au moins, ça a changé quand j'ai redimensionné ma fenêtre.
- et ToniLeigh, avez-vous ouvert le lien que Abdull posté ci-dessus? Susceptibles de résoudre votre problème.
- Sur Safari $(window).hauteur() ne modifie pas avec le zoom, mais il le fait pour Chrome, Firefox et IE. Juste quelque chose d'être conscient de.
- fonctions jQuery retourne la valeur en pixels, pouvons-nous obtenir une vue du port de parts à l'aide de jQuery?
InformationsquelleAutor SimaWB
39

Vous pouvez essayer fenêtre d'affichage des unités de (CSS3):
```
div { 
  height: 95vh; 
  width: 95vw; 
}
```
Prise en charge du navigateur
- pas de travail pour tous les navigateurs mobiles ou ipad
InformationsquelleAutor Vitalii Fedorenko
25

1. Réponse à la question principale

Le script $(window).height() fonctionne bien (montrant la fenêtre d'affichage de la hauteur et de ne pas le document avec le défilement de la hauteur), MAIS il faut que vous placez correctement la balise doctype dans votre document, par exemple, ces doctypes:

Pour le HTML 5:

<!DOCTYPE html>

Transitoire HTML4:

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

Probablement le défaut doctype supposé par certains navigateurs est tel, que $(window).height() prend le document de la hauteur et de ne pas le navigateur de la hauteur. Avec le doctype de la spécification, il est résolu de manière satisfaisante, et je suis sûr que vous peps permettra d'éviter "l'évolution de défilement-overflow hidden et puis de nouveau", qui est, je suis désolé, un peu sale tour, spécialement si vous n'avez pas de document sur le code pour l'avenir du programmeur d'utilisation.

2. Une autre astuce, note de côté:
En outre, si vous faites un script, vous pouvez inventer des tests pour aider les programmeurs à l'aide de 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 petit truc en plus, note de côté":
@Machiel, hier dans les commentaires (2014-09-04), était tout à fait à droite: la vérification de l' $ ne peut pas être à l'intérieur de l'événement ready de Jquery, car nous sommes, comme il l'a souligné, en supposant que $ est déjà défini. MERCI POUR CETTE remarque, et s'il vous plaît, le reste de vous, les lecteurs, corriger cet, si vous avez utilisé dans vos scripts. Ma suggestion est la suivante: dans vos bibliothèques mettre un "install_script()" fonction qui initialise la bibliothèque (mettre toute référence à $ l'intérieur d'une telle fonction init, y compris la déclaration de prêt()) et AU DÉBUT de ces "install_script()" fonction, vérifiez si le $ est définie, mais de faire tout indépendant de JQuery, votre bibliothèque peut "diagnostic lui-même" lorsque JQuery n'est pas encore défini. Je préfère cette méthode plutôt que de forcer la création automatique de JQuery en l'amenant à partir d'un CDN. Ceux sont de petites notes de côté pour aider les autres programmeurs. Je pense que les gens qui font les bibliothèques se doivent d'être plus riche dans les commentaires pour le potentiel du programmeur erreurs. Par exemple, l'Api Google besoin d'un côté manuel pour comprendre les messages d'erreur. C'est absurde, à besoin de la documentation externe pour les quelques petites erreurs qui n'ont pas besoin de vous pour aller à la recherche d'un manuel ou d'un cahier des charges. La bibliothèque doit être AUTO-DOCUMENTÉ. J'écris du code, même en prenant soin de les erreurs que je pourrais commettre encore six mois à partir de maintenant, et il essaie toujours d'être propre et sans code répétitif, déjà-écrit-pour-éviter-avenir-développeur-erreurs.
- Il est très difficile de lire votre post. Veuillez refaire votre post afin que vous vous habituez à la StackExchange Markdown comme tout le monde. Il y a une raison pourquoi StackExchange sites de ne pas utiliser TinyMCE, mais si vous avez un reproche à elle, de s'impliquer dans la Meta.
- C'est un peu bizarre que vous vérifiez la disponibilité de $ après que vous avez déjà utilisé le $ appeler $(document).ready(function() { } );. Il est bon si vous vérifiez si jQuery est disponible, mais à ce stade, il est déjà trop tard.
- vous êtes tout à fait DROIT. Heureusement, je ne suis allé vérifier mes scripts, et ils n'utilisent pas le prêt de l'événement. Oui, merci, je me sentais stupide, quand vous avez dit cela, mais heureusement, j'ai juste vérifié que dans mes scripts de la vérification est à l'intérieur d'une fonction appelée "install_this_script()", et dans cette installation, j'ai appeler la fonction init de la bibliothèque, mais avant cela, j'ai vérifier (à l'EXTÉRIEUR de JQUERY) si le $ objet est définie ou non. MERCI quand même, bro, vous ai paniqué! J'ai peur que ce post a été ici trop longtemps, j'espère que cette erreur n'a pas fait beaucoup de mal, pour les autres lecteurs. J'ai corrigé le post.
- Ce devrait être la vraie réponse! Merci!
InformationsquelleAutor David L
5

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

jQuery n'a pas de fonction pour détecter de façon constante l'correctement la largeur et la hauteur de la fenêtre d'affichage[1] quand il y a une barre de défilement présente.

J'ai trouvé une solution qui utilise la Modernizr de la bibliothèque et plus précisément de la mq fonction qui ouvre des requêtes de mé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 sera probablement pas aider le redimensionnement d'une iframe à 100% de la largeur de la fenêtre d'affichage, avec une marge de chaque côté, mais j'espère que ça va apporter quelque réconfort pour webdevelopers frustrés avec le navigateur de l'incohérence de javascript fenêtre d'affichage de la largeur et de la hauteur de calcul.

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).hauteur() pour obtenir un nombre qui sera corriger dans certains navigateurs, mais incorrecte dans d'autres. Dans ces navigateurs, vous pouvez essayer d'utiliser la fenêtre.innerWidth et de la fenêtre.innerHeight pour obtenir la bonne largeur et la hauteur, mais je voudrais des conseils à l'encontre de cette méthode car elle reposerait sur l'agent utilisateur en reniflant.

Généralement les différents navigateurs sont contradictoires quant à savoir si ou non ils comprennent la barre de défilement dans le cadre de la fenêtre de largeur et de hauteur.

Remarque: les Deux $(window).width() et de la fenêtre.innerWidth varier entre les systèmes d'exploitation en utilisant le même navigateur.
Voir: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

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

À l'aide de $(window).hauteur() ne vous donnera pas la taille de la fenêtre, il vous donnera la taille de l'ensemble de la fenêtre, qui est généralement de la taille de l'ensemble du document si le document pourrait être encore plus grand.
idéal pour la largeur !

InformationsquelleAutor AnuRaj

1

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

InformationsquelleAutor D.A.H

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

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

getViewport();

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

InformationsquelleAutor SandroMarques

Vous devez vous connecter pour publier un commentaire.