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

Vous pouvez obtenir la taille de la fenêtre ou du document avec jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Pour la taille de l'écran, vous pouvez utiliser l' screenobjet:

window.screen.height;
window.screen.width;

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

mais en bref:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Violon

Veuillez arrêter de modifier cette réponse. Il a été modifié 22 fois maintenant par différentes personnes pour correspondre à leur préférence de format de code. Il a également été souligné que cela n'est pas nécessaire si vous souhaitez uniquement cibler les navigateurs modernes - si tel est le cas, vous n'avez besoin que des éléments suivants:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

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

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

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

Un moyen non jQuery pour obtenir la dimension d'écran disponible. window.screen.width/heighta déjà été mis en place, mais pour le webdesign réactif et l'intégralité, je pense que cela vaut la peine de mentionner ces attributs:

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

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

availWidth et availHeight - La largeur et la hauteur disponibles sur l'écran (à l'exclusion des barres de tâches du système d'exploitation et autres).

Mais lorsque nous parlons d'écrans réactifs et si nous voulons le gérer à l'aide de jQuery pour une raison quelconque,

window.innerWidth, window.innerHeight

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

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

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

Dans la plupart des cas, ce sera la meilleure façon, par exemple, d'afficher une boîte de dialogue modale flottante parfaitement centrée. 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 à l'aide du navigateur.

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

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

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

étape 2 : assurez-vous que l'écran de votre navigateur ne doit pas être en mode «maximiser». Si l'écran du navigateur est en mode «Agrandir», vous devez d'abord cliquer sur le bouton Agrandir (présent dans le coin supérieur droit ou gauche) et le dé-maximiser.

étape 3 : Maintenant, écrivez ce qui suit après le signe supérieur à ('>') ie

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

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

Si vous avez besoin d'une solution vraiment pare-balles pour la largeur et la hauteur du document (le pageWidthet pageHeightdans l'image), vous voudrez peut-être 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 échouent . Malgré son nom, vous n'avez pas nécessairement à utiliser jQuery - il est écrit en Javascript vanilla et fonctionne également sans jQuery .

Usage:

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

pour le monde document. Pour les autres documents, par exemple dans un iframe intégré auquel vous avez accès, passez le document en paramètre:

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

Mise à jour: maintenant aussi pour les dimensions des fenêtres

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

Cela est nécessaire car

• $( window ).height()est buggé dans iOS , au point d'être inutile
• $( window ).width()et ne $( window ).height()sont pas fiables sur mobile, car ils ne gèrent pas les effets du zoom mobile.

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

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.

Vous trouverez ici 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 d'origine 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()
)()

Fondamentalement, le code ajoute un petit div qui se met à jour lorsque vous redimensionnez votre fenêtre.

Dans certains cas, une mise en page réactive $(document).height()peut renvoyer des données erronées qui affichent uniquement la hauteur du port d'affichage. Par exemple, lorsqu'un wrapper div # a une hauteur: 100%, ce # wrapper peut être étiré par un bloc à l'intérieur. Mais sa hauteur sera toujours la hauteur de la fenêtre. Dans une telle situation, vous pourriez utiliser

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

Cela représente la taille réelle du wrapper.

Guide complet relatif aux tailles d'écran

Javascript

Pour la hauteur:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Remarque: Lorsque la fenêtre est agrandie, cela équivaut à screen.availHeight

Pour largeur:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

Pour la hauteur:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Pour largeur:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Référence: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

J'ai développé une bibliothèque pour connaître la taille réelle de la fenêtre d'affichage pour les navigateurs de bureau et mobiles, car les tailles de fenêtre d'affichage sont incohérentes sur tous les appareils et ne peuvent pas s'appuyer sur toutes les réponses de ce message (selon toutes les recherches que j'ai faites à ce sujet): https: // github .com / pyrsmk / W

Parfois, vous devez voir les changements 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 boîte à journaux qui surveille dynamiquement toutes les mises à jour et presque immédiatement les mises à jour.

Il ajoute un code HTML valide avec une position fixe et un index z élevé, mais est suffisamment petit, vous pouvez donc :

• l'utiliser sur un site réel
• l'utiliser pour tester des vues mobiles / réactives

Testé sur: Chrome 40, IE11, mais il est également possible de travailler sur d'autres navigateurs / anciens ... :)

  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 de l'enregistreur - pas à toutes les tables - c'est aussi une solution sans jQuery :)

Avec l'introduction de globalThisdans ES2020, vous pouvez utiliser des propriétés telles que.

Pour la taille de l'écran:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Pour la taille de la fenêtre

globalThis.outerWidth
globalThis.outerHeight

Pour le décalage:

globalThis.pageXOffset
globalThis.pageYOffset

...& bientôt.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Vous pouvez utiliser l' écran objet pour l'obtenir.

Ce qui suit est 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 screenWidthvariable, utilisez simplement la screen.widthmême chose que screenHeightvous utiliseriez screen.height.

Pour obtenir la largeur et la hauteur de votre fenêtre, ce serait screen.availWidthou screen.availHeightrespectivement.

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

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

En utilisant à nouveau jQuery, utilisez $("html").offset().topet $("html").offset().leftpour vos valeurs pageXet pageY.

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

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

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

var screenWidth = window.screen.availWidth;

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

Screen.availWidth