javascript - standard - taille d'une page web en pixel




Obtenez la taille de l'écran, la page Web actuelle et la fenêtre du navigateur (11)

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

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



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 original

Le code d'origine est dans le 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 précédé d'un petit div qui se met à jour lorsque vous redimensionnez votre fenêtre.


J'ai développé une bibliothèque pour connaître la taille réelle de la fenêtre pour les ordinateurs de bureau et les navigateurs mobiles, car les tailles des fenêtres sont incohérentes sur tous les appareils et ne peuvent pas compter sur toutes les réponses de ce message: https://github.com/pyrsmk/W


Nous pouvons maintenant utiliser en toute sécurité l'api de la fenêtre javascript native dans tous les navigateurs , sans le contexte de la fenêtre.

La syntaxe est plutôt 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é Window devicePixelRatio renvoie le rapport de la résolution en pixels physiques à la résolution en pixels CSS pour le périphérique d'affichage en cours. Cette valeur pourrait également être interprétée comme le rapport des tailles de pixels: la taille d'un pixel CSS à la taille d'un pixel physique. En termes plus simples, cela indique au navigateur combien de pixels réels de l'écran doivent être utilisés pour dessiner un seul pixel CSS.

Ceci est utile pour gérer la différence entre le rendu sur un affichage standard et un affichage HiDPI ou Retina, qui utilise plus de pixels pour dessiner les mêmes objets, ce qui donne une image plus nette.

Il n'y a aucun moyen d'être averti lorsque cette valeur est modifiée (ce qui peut arriver, par exemple, si l'utilisateur fait glisser la fenêtre sur un affichage avec une densité de pixels différente). Comme il n'y a pas de rappels ou d'événements disponibles pour détecter les changements de densité de pixels, la seule façon de le faire est de vérifier périodiquement la valeur de devicePixelRatio pour voir si elle a été modifiée. Ne le faites pas trop souvent, sinon vous nuire à la performance.

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


Parfois, vous devez voir les changements de largeur / hauteur tout en redimensionnant la fenêtre et le contenu interne.

Pour cela, j'ai écrit un petit script qui ajoute une boîte de dialogue qui surveille de manière dynamique tout le redimensionnement et les mises à jour presque immédiatement.

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

  • l'utiliser sur un site réel
  • Utilisez-le pour tester les vues mobiles / réactives


Testé sur: Chrome 40, IE11, mais il est tout à fait 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 uniquement à l'élément de la table de journalisation - pas à toutes les tables - aussi c'est une solution sans jQuery :)


Si vous avez besoin d'une solution véritablement pare-balles pour la largeur et la hauteur du document ( pageWidth et pageHeight dans l'image), vous pouvez envisager d'utiliser un de mes jQuery.documentSize , jQuery.documentSize .

Il n'a qu'un seul but: toujours retourner la bonne taille 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 vanilla et fonctionne sans jQuery , aussi.

Usage:

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

pour le document global. Pour les autres documents, par exemple dans un iframe incorporé auquel 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 parce que

  • $( window ).height() est buggé dans iOS , au point d'être inutile
  • $( window ).width() et $( 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 .


Si vous utilisez jQuery, vous pouvez obtenir la taille de la fenêtre ou du document en utilisant les 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 de l'écran, vous pouvez utiliser l'objet screen de la manière suivante:

screen.height;
screen.width;

Voici une solution cross browser avec JavaScript pur ( w3schools.com/jsref/prop_win_innerheight.asp ):

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

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

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 vraie zone utilisable dans la fenêtre du navigateur .

Pour ce faire, utilisez les propriétés window.innerWidth : window.innerWidth et window.innerHeight ( w3schools.com/jsref/prop_win_innerheight.asp ).

Dans la plupart des cas, ce sera le meilleur moyen, 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 en utilisant le 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>');




cross-browser