web-dev-qa-db-fra.com

Obtenir la taille de l'écran, la page Web actuelle et la fenêtre du navigateur

Comment puis-je obtenir windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY qui fonctionnera dans tous les principaux navigateurs?

screenshot describing which values are wanted

javascriptjquerylayoutcross-browser
1881
turtledove

Si vous utilisez jQuery, vous pouvez obtenir la taille de la fenêtre ou du document à l'aide des méthodes jQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

Pour la taille d’écran, vous pouvez utiliser l’objet screen de la manière suivante:

screen.height;
screen.width;
1295
Ankit Jaiswal

Cela a tout ce que vous devez savoir: Obtenir la taille de la fenêtre/viewport

mais en bref:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Violon

914
sidonaldson

Voici une solution multi-navigateurs avec JavaScript pur ( Source ):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
448
confile

Un moyen non jQuery d'obtenir la dimension d'écran disponible. window.screen.width/height a déjà été mis en place, mais pour des raisons de réactivité et de conception Web, je pense qu'il est utile de mentionner ces attributs:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t1 :

availWidth et availHeight - La largeur et la hauteur disponibles à l'écran (à l'exclusion Barres de tâches OS et autres).

87
Daniel W.

Mais quand nous parlons d'écrans réactifs et si nous voulons le gérer en utilisant jQuery pour une raison quelconque,

window.innerWidth, window.innerHeight

donne la mesure correcte. Même si cela supprime l'espace supplémentaire de la barre de défilement, nous n'avons pas à nous préoccuper de l'ajuster :)

60
Aabha Pandey

Pour vérifier la hauteur et la largeur de la page actuellement chargée de n’importe quel site Web, utilisez "console" ou après avoir cliqué sur "Inspecter".

étape 1: Cliquez sur le bouton droit de la souris et cliquez sur 'Inspecter' puis cliquez sur 'console'

étape 2: Assurez-vous que l'écran de votre navigateur ne soit pas en mode "maximisé". Si l'écran du navigateur est en mode "agrandissement", vous devez d'abord cliquer sur le bouton Agrandir (situé dans le coin supérieur droit ou gauche) et le désagrandir.

étape: Maintenant, écrivez ce qui suit après le plus grand signe ('>') i.e.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)
18
solanki...

Vous pouvez également obtenir la largeur et la hauteur de WINDOW, en évitant les barres d’outils et autres choses du navigateur. C'est la zone réellement utilisable dans la fenêtre du navigateur .

Pour ce faire, utilisez: window.innerWidth et window.innerHeight propriétés ( voir doc sur w3schools ).

Dans la plupart des cas, ce sera la meilleure façon, par exemple, d’afficher un dialogue modal flottant parfaitement centré. Il vous permet de calculer les positions sur la fenêtre, quelle que soit l'orientation de la résolution ou la taille de la fenêtre utilisant le navigateur.

18
serfer2
function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');
17
dude

Si vous avez besoin d'une solution à toute épreuve pour la largeur et la hauteur du document (les pageWidth et pageHeight de l'image), vous pouvez envisager d'utiliser un de mes plugins, jQuery.documentSize .

Il n'a qu'un seul objectif: toujours renvoyer la taille de document correcte, même dans les scénarios où jQuery et d'autres méthodes fail . Malgré son nom, vous ne devez pas nécessairement utiliser jQuery - il est écrit en Javascript Javascript et fonctionne sans jQuery , aussi.

Usage:

var w = $.documentWidth(),
    h = $.documentHeight();

pour le global document. Pour d'autres documents, par exemple Dans une iframe intégrée à laquelle vous avez accès, transmettez le document en tant que paramètre:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Mise à jour: maintenant pour les dimensions de la fenêtre aussi

Depuis la version 1.1.0, jQuery.documentSize gère également les dimensions de la fenêtre.

C'est nécessaire car

jQuery.documentSize fournit $.windowWidth() et $.windowHeight(), qui résolvent ces problèmes. Pour plus d'informations, consultez la documentation .

10
hashchange

J'ai écrit un petit bookmarklet javascript que vous pouvez utiliser pour afficher la taille. Vous pouvez facilement l'ajouter à votre navigateur et chaque fois que vous cliquez dessus, vous verrez la taille dans le coin droit de la fenêtre de votre navigateur.

Ici vous trouvez des informations sur l’utilisation d’un bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:Azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Code d'origine

Le code original est en café:

(->
  addWindowSize = ()->
    style = 'background-color:Azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

En gros, le code ajoute une petite div qui se met à jour lorsque vous redimensionnez votre fenêtre.

8
Andi Giga

Dans certains cas liés à une présentation dynamique, $(document).height() peut renvoyer des données erronées affichant uniquement la hauteur du port de visualisation. Par exemple, quand un div # wrapper a une hauteur: 100%, ce #wrapper peut être étiré par un bloc à l'intérieur. Mais sa hauteur sera toujours comme la hauteur de la fenêtre. Dans une telle situation, vous pourriez utiliser

$('#wrapper').get(0).scrollHeight

Cela représente la taille réelle de l'emballage.

5
Akim Kelar

J'ai développé une bibliothèque pour connaître la taille réelle de la fenêtre d'affichage des ordinateurs de bureau et des navigateurs mobiles, car la taille de la fenêtre d'affichage varie d'un appareil à l'autre et ne peut pas s'appuyer sur toutes les réponses de ce message (d'après toutes les recherches que j'ai effectuées à ce sujet): https : //github.com/pyrsmk/W

4
pyrsmk

Parfois, vous devez voir les modifications de largeur/hauteur lors du redimensionnement de la fenêtre et du contenu interne.

Pour cela, j'ai écrit un petit script qui ajoute une zone de journal qui surveille de manière dynamique tous les redimensionnements et les mises à jour presque immédiates.

Il ajoute un code HTML valide avec une position fixe et un indice z élevé, mais il est suffisamment petit pour que vous le pouvez:

  • utilisez-le sur un site réel
  • utilisez-le pour tester mobile/responsive vues


Testé sur: Chrome 40, IE11, mais il est également très possible de travailler sur d’autres/plus anciens navigateurs ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

EDIT: Maintenant, les styles sont appliqués uniquement à l'élément de table logger - pas à toutes les tables - il s'agit également d'une solution jQuery-free :)

3
jave.web

Vous pouvez utiliser l'objet Screen pour l'obtenir.

Voici un exemple de ce qu'il retournerait:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Pour obtenir votre variable screenWidth, utilisez simplement screen.width, comme avec screenHeight, vous utiliseriez simplement screen.height.

Pour obtenir la largeur et la hauteur de votre fenêtre, il s'agirait respectivement de screen.availWidth ou screen.availHeight.

Pour les variables pageX et pageY, utilisez window.screenX or Y. Notez que cela provient de TRÈS GAUCHE/HAUT DE VOTRE ÉCRAN GAUCHE/PLUS HAUT . Donc, si vous avez deux écrans de largeur 1920, une fenêtre située à 500 pixels à gauche de l'écran de droite aura une valeur X égale à 2420 (1920 + 500). screen.width/height, cependant, affiche la largeur ou la hauteur de l'écran CURRENT.

Pour obtenir la largeur et la hauteur de votre page, utilisez $(window).height() ou $(window).width() de jQuery.

Toujours en utilisant jQuery, utilisez $("html").offset().top et $("html").offset().left pour vos valeurs pageX et pageY.

2
Zach Barham

voici ma solution!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();
0
user8202629

Voici comment j'ai réussi à obtenir la largeur de l'écran dans React JS Project:

Si la largeur est égale à 1680, alors retourne 570 sinon retourne 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

0
Prashant Yalatwar