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

Si vous utilisez jQuery, vous pouvez obtenir la taille de la fenêtre ou d'un document à l'aide de 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 le screen objet de la manière suivante:

screen.height;
screen.width;

Ici est un navigateur croix de solution pure JavaScript (Source):

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

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

Mais lorsque nous parlons de réactif écrans et si on veut le manipuler à l'aide de jQuery pour une raison quelconque,

window.innerWidth, window.innerHeight

donne la bonne mesure. Même s'il supprime la barre de défilement de l'espace supplémentaire et nous n'avons pas besoin de s'inquiéter au sujet de l'adaptation que de l'espace 🙂

Vous pouvez également obtenir la FENÊTRE de largeur et de hauteur, en évitant la barre d'outils du navigateur et d'autres choses. C'est le réel de surface utile dans la fenêtre du navigateur.

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

Dans la plupart des cas, il sera le meilleur moyen, par exemple, pour afficher une parfaitement centrée flottante, boîte de dialogue modale. Il vous permet de calculer les positions de la fenêtre, peu importe la résolution de l'orientation ou de la taille de la fenêtre est à l'aide du navigateur.

Si vous avez besoin d'une véritable solution impénétrable pour le document de la largeur et de la hauteur (la pageWidth et pageHeight dans l'image), vous pouvez envisager d'utiliser un plugin de mine, jQuery.documentSize.

Il n'a qu'un seul objectif: toujours le bon format de document, même dans les scénarios lors de jQuery et d'autres méthodes l'échec. En dépit de son nom, vous n'avez pas nécessairement besoin d'utiliser jQuery – il est écrit en Javascript natif et fonctionne sans jQuery, trop.

Utilisation:

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

pour le mondial document. Pour les autres documents, par exemple dans un intégré à l'iframe, vous avez accès à, passer 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, trop

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

Qui est nécessaire parce que

• $( window ).height() est buggy dans iOS, au point d'être inutile
• $( window ).width() et $( window ).height() sont peu fiable sur mobile car ils n'ont pas à gérer les effets de la téléphonie mobile de zoom.

jQuery.documentSize fournit $.windowWidth() et $.windowHeight(), qui à résoudre ces problèmes. Pour plus d'informations, s'il vous plaît vérifier la documentation.

Dans certains cas liés à responsive layout $(document).height() peut renvoyer des données erronées qui affiche la vue du port de hauteur seulement.
Par exemple, lorsque certains div#wrapper a la hauteur:100%, qu' #wrapper peut être étiré par certains de bloc à l'intérieur. Mais c'est de la hauteur seront toujours comme fenêtre d'affichage de la hauteur. Dans une telle situation, vous pouvez utiliser

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

Qui représente la taille réelle de wrapper.

Parfois, vous avez besoin de voir la largeur/hauteur des modifications lors du redimensionnement de la fenêtre et le contenu interne.

Pour qui j'ai écrit un petit script qui ajoute une boîte journal que dynamicly surveille tous le redimensionnement et presque immédiatement mises à jour.

Il ajoute un code HTML valide avec position fixe et du haut de z-index, mais est assez petite, donc vous pouvez:

• l'utiliser sur un réelle site
• l'utiliser pour tester les mobile/responsive
  vues

Testé sur: Chrome 40, IE11, mais il est très possible de travailler sur d'autres/les anciens navigateurs trop ... 🙂

  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'exploitant forestier élément de la table - pas à toutes les tables - aussi c'est un jQuery-gratuit solution 🙂

, voici ma solution!

JS:

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