Détecte la largeur de la fenêtre et compense les barres de défilement - Javascript

Question

Comment détecter la largeur de la fenêtre d'un utilisateur avec Javascript et tenir compte de sa barre de défilement? (J'ai besoin de la largeur de l'écran à l'intérieur de la barre de défilement). Voici ce que j'ai ... il semble fonctionner dans plusieurs navigateurs ... sauf qu'il ne tient pas compte des barres de défilement ..

function browserWidth() { 
    var myWidth = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    } else if(document.documentElement && document.documentElement.clientWidth) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    } else if(document.body && document.body.clientWidth) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    } 
    return myWidth; 
} 

des idées? je l'ai besoin pour fonctionner dans tous les navigateurs;)

Answer 1

Vous trouverez le grand résumé des propriétés prises en charge sur les navigateurs on this page on quirksmode.org. Votre meilleur pari est probablement d'attraper un élément dans la page (en utilisant document.body où supporté, ou document.getElementById ou autre), de parcourir sa chaîne offsetParent pour trouver l'élément le plus haut, puis d'examiner la largeur de client et clientHeight de cet élément.

Answer 2

Je comparerais la "largeur intérieure" à la largeur du corps. Si la largeur du corps> innerwidth, alors les barres de défilement sont présentes.

if (browserWidth() < document.body.offsetWidth) { 
    doSomething(); 
} 

Answer 3

A (nettement méchant) solution de contournement si vous n'êtes intéressé que par la largeur est de créer un 1px x 100% div et utiliser son offsetWidth. Fonctionne sur IE> = 7, FF, Chrome, Safari et Opera (je n'ai pas essayé IE6, car nous travaillons à un système qui a de la chance-il-fonctionne-à-tout-donc-ne-pas-se plaindre -about-rendu-bizarreries politique autour de ces jours-ci). Je suspends le document div.office avec les attributs { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, le créant la première fois que cela est nécessaire.

Fonctionne si vous pouvez l'estomac.

Answer 4

ajouter que avant la window.innerWidth() vérifier:

if (typeof(document.body.clientWidth) == 'number') { 
    // newest gen browsers 
    width = document.body.clientWidth; 
    height = document.body.clientHeight; 
} 

Answer 5

Une autre solution, vous pouvez essayer est en train de changer un peu de CSS afin défilement qui se passe dans votre page, au lieu de la fenêtre du navigateur le faire. Dans le style de body, ajoutez overflow: auto. Maintenant, l'élément de corps inclut la barre de défilement, donc quand vous obtenez la largeur de la fenêtre, vous mesurez la largeur à l'extérieur du récipient de défilement au lieu de l'intérieur. Cela peut sembler être une source potentielle de bizarrerie, et peut-être un problème d'accessibilité, donc si vous voulez une utilisation répandue, vous voudrez peut-être la tester très soigneusement.

Answer 6

C'est ce que j'ai fait - seulement une demi-année d'apprentissage de JavaScript, donc cela peut être une mauvaise solution. Tout d'abord, j'ai créé une image carrée transparente (10px x 10px), mais vous pouvez aussi créer une image non transparente et ajouter à votre JavaScript comme
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image 
meant to determine the dimensions of the viewport" width="10px" height="10px"/> 

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but 
//better to keep it with other related code in JS file) 
document.getElementById('getDimensions').style.position = "fixed"; 
document.getElementById('getDimensions').style.bottom = "0px"; 
document.getElementById('getDimensions').style.right = "0px"; 

//Everything below inside function called by window.onresize event handler 
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft; 
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop; 
    //Account for the dimensions of the square img element (10x10) 
var viewportWidth = baseWidthCalculation + 10; 
var viewportHeight = baseHeightCalculation + 10; 

Answer 7

Ceci est une version plus efficace d'une idée postée ici par Tim Salai (ev Bien que vous commenciez tout juste, c'était génial de placer un élément dans le coin inférieur droit comme ça).

var getDimensions = document.createElement("div"); 
getDimensions.setAttribute("style", 
      "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
document.getElementsByTagName("body")[0].appendChild(getDimensions); 
var viewportWidth = getDimensions.offsetLeft; 
var viewportHeight = getDimensions.offsetTop; 

Et voici une version modulaire

var PageDimensions = function(){ 
var Width; 
var Height;  

function pagedimensionsCtor(){ 
    var getDimensions = document.createElement("div"); 
    getDimensions.setAttribute("style" , 
     "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
    document.getElementsByTagName("body")[0].appendChild(getDimensions); 
    Width = getDimensions.offsetLeft; 
    Height = getDimensions.offsetTop; 
    getDimensions.parentNode.removeChild(getDimensions); 
} 
pagedimensionsCtor(); 

function Reset(){ 
    pagedimensionsCtor(); 
}  

function GetPageHeight(){ 
    return Height; 
} 

function GetPageWidth(){ 
    return Width; 
} 

return{ 
    Reset: Reset, 
    GetPageHeight: GetPageHeight, 
    GetPageWidth: GetPageWidth 
}; 
} 

Utilisez la version modulaire:

var page = new PageDimensions(); 
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight()); 

fonction Bonus:

page.Reset();//just in case you think your dimensions have changed