C'est tout ce que vous devez savoir:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript /

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

Voici une solution de navigateur croisé avec pur JavaScript ( 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/height a déjà été mis en place, mais pour responsive webdesign et completeness sake je pense qu'il vaut la peine de mentionner ces attributs:

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

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

disponwidth et disponheight - la largeur et la hauteur disponibles sur le écran (à l'exclusion des barres de tâches OS et autres).

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 cela supprime l'espace supplémentaire de la barre de défilement et nous n'avons pas besoin de nous inquiéter d'ajuster cet espace:)

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

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

Pour ce faire, utilisez: window.innerWidth et window.innerHeight propriétés " ( voir doc à 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, non question de l'orientation de la résolution ou de la taille de la fenêtre qui utilise le navigateur.

pour vérifier la hauteur et la largeur de votre page chargée actuelle de tout site Web en utilisant " 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 doit pas être en mode "maximize". Si l'écran du navigateur est en mode "maximize", vous devez d'abord cliquer sur le bouton maximize (présent dans le coin supérieur droit ou gauche) et le désactiver.

Etape 3 : maintenant, écrivez ce qui suit après le signe plus grand que ('>') i.e.

       > 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 pageWidth et pageHeight dans l'image), vous pourriez envisager d'utiliser un de mes plugin, jQuery.documentSize .

il a juste un but: toujours retourner la taille correcte de document, 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 vanille et fonctionne sans jQuery , aussi.

Utilisation:

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

pour le mondial document . Pour d'autres documents, par exemple dans une iframe intégrée à laquelle vous avez accès, passez le document comme paramètre:

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

mise à jour: maintenant pour les dimensions de la fenêtre, trop

depuis la version 1.1.0, jQuery.documentSize aussi gère les dimensions des fenêtres.

C'est nécessaire parce que

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

jQuery.documentSize fournit $.windowWidth() et $.windowHeight() , qui résoudre ces problèmes. Pour plus d'information, veuillez consulter dans 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.

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

fondamentalement le code est en train de préparer un petit div qui se met à jour lorsque vous redimensionnez votre fenêtre.

dans certains cas liés avec la mise en page responsive $(document).height() peut retourner des données erronées qui affiche la hauteur du port de vue seulement. Par exemple, lorsqu'un div#wrapper a une hauteur de 100%, ce #wrapper peut être étiré par un bloc à l'intérieur. Mais sa hauteur sera toujours comme la hauteur de viewport. Dans une telle situation, vous pourriez utiliser

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

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

j'ai développé une bibliothèque pour connaître la taille réelle de viewport pour les ordinateurs de bureau et les navigateurs mobiles, parce que les tailles de viewport ne sont pas uniformes à travers les appareils et ne peut pas compter sur toutes les réponses de ce post (selon toutes les recherches que j'ai faites à ce sujet): https://github.com/pyrsmk/W

parfois, vous devez voir la largeur/hauteur change tout en redimensionnant la fenêtre et le contenu intérieur.

pour cela j'ai écrit un petit script qui ajoute une boîte de journal qui surveille dynamiquement toutes les mises à jour de redimensionnement et presque immédiatement.

il ajoute un HTML valide avec position fixe et haut index en z, mais est assez petit, donc vous pouvez :

• utilisez-le sur un effectif site
• l'utiliser pour tester les mobile/responsive les points de vue

testé sur: Chrome 40, IE11, mais il est très possible de travailler sur d'autres/anciens navigateurs aussi ... :)

  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 seulement à l'élément logger table - pas à toutes les tables - aussi c'est un jQuery-free solution:)

vous pouvez utiliser l'objet écran pour obtenir ceci.

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 screenWidth variable, il suffit d'utiliser screen.width , même avec screenHeight , vous utilisez simplement screen.height .

pour obtenir la largeur et la hauteur de votre fenêtre, il serait screen.availWidth ou screen.availHeight respectivement.

pour la pageX et pageY variables, utilisez window.screenX or Y . Notez que cela vient du très gauche/haut de votre écran gauche/haut-est . Donc si vous avez deux écrans de largeur 1920 alors une fenêtre 500px à partir de la gauche de l'écran droit aurait une valeur de X de 2420 (1920+500). screen.width/height , cependant, afficher la largeur ou la hauteur de l'écran courant.

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

utilisez de nouveau jQuery, utilisez $("html").offset().top et $("html").offset().left pour vos valeurs pageX et 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();
})();

nous pouvons maintenant utiliser seul l'api de fenêtre JavaScript natif dans tous les navigateurs , sans contexte de fenêtre.

la syntaxe est assez claire!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

pour obtenir des résultats précis dans tous les navigateurs et appareils, les résultats doivent être multipliés par le devicePixelRatio .

la propriété de la fenêtre devicePixelRatio retourne le ratio de la résolution en pixels physiques à la résolution en pixels CSS dispositif d'affichage actuel. Cette valeur pourrait également être interprétée comme rapport des tailles de pixels: la taille d'un pixel CSS à la taille d'un un pixel physique. En termes plus simples, cela indique au navigateur combien de les pixels réels de l'écran devraient être utilisés pour dessiner un seul pixel CSS.

ceci est utile pour traiter la différence entre un rendu sur un norme affichage versus un affichage HiDPI ou Retina, qui utilisent plus les pixels de l'écran pour tirer les mêmes objets, résultant en une image plus nette.

il n'y a aucun moyen d'être notifié lorsque cette valeur est changée (ce qui peut se produire, par exemple, si l'utilisateur fait glisser la fenêtre à l'écran avec un différentes densité de pixels). Depuis il n'y a pas de rappels ou d'événements disponible pour détecter la densité de pixels de changements, la seule façon de le faire est de vérifier périodiquement la valeur de devicePixelRatio pour voir si c'est modifié. Ne le fais pas trop souvent, ou tu auras un impact sur la performance.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

voici ma solution. Tout d'abord, il va un objet utilitaire pour travailler avec cookie

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

, Alors vous pouvez faire quelque chose comme..

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

de cette façon, vous pouvez utiliser une langue serverside pour lire les cookies et obtenir la taille exacte de l'image de l'écran de l'utilisateur.