Test de plusieurs écrans avec javascript

Question

Est-il possible de dire si l'utilisateur d'un site Web utilise plusieurs moniteurs? J'ai besoin de trouver la position d'un popup, mais il est très probable que l'utilisateur aura une configuration de plusieurs moniteurs. Alors que window.screenX etc donnera la position de la fenêtre du navigateur, il est inutile pour plusieurs moniteurs.

Answer 1

Je ne crois pas que ce soit possible maintenant; cependant js devient plus populaire pour l'utilisation de bureau dans les widgets en plus du développement web et ce serait une excellente fonctionnalité à demander pour une future version

Answer 2

J'ai trouvé cela comme une solution que quelqu'un a utilisé ... Je ne vois pas pourquoi vous ne pouviez pas lui faire confiance.

[si la largeur est supérieure à (hauteur/3) * 4> (screen.width) ALORS]

[L'utilisateur a double écran]

[End If]

Answer 3

Vous pouvez Ne fais pas ça. Vous pouvez cependant positionner la fenêtre centrée sur la fenêtre parent. Je pense que c'est une meilleure idée de montrer un "div" comme un dialogue au milieu de votre site Web, parce que la chance que ceci soit bloqué par popup est plus petite et c'est OMI moins ennuyeux.

Answer 4

Qu'en est-il de la taille de l'écran? Les écrans multiples ont généralement une grande taille. Il suffit de vérifier les tailles et de décider s'il est raisonnable d'être sur un ou plusieurs écrans.

Answer 5

Vous pouvez faire une conjecture bien éduquée avec JavaScript screen.width (.availWidth) et screen.height (.availHeight). Mon idée était de supposer (!) Que les moniteurs suivent généralement un certain ratio, alors que la largeur. [Avail] devrait être en dehors de celle-ci parce que l'écran est dupliqué seulement en termes de largeur, mais pas de hauteur.

En écrivant cette réponse, cela ressemble à un hack sévère. Rien sur quoi je comptais vraiment.

Answer 6

Ceci est une solution trop compliquée. Je recommande fortement de refactoriser ceci - il n'a pas été utilisé sur un site de production, seulement comme une preuve de concept rapide pour moi-même.

À droite, mise en garde.

J'ai d'abord supposé que l'utilisateur pourrait ne pas avoir une configuration à double moniteur, mais ils pourraient avoir un très grand moniteur et donc la même fonctionnalité pourrait être appliquée de toute façon.

var newWindow, 
    screenSpaceLeft = window.screenX, 
    screenSpaceTop = window.screenY, 
    screenSpaceRight = screen.availWidth - (window.screenX + window.outerWidth), 
    screenSpaceBottom = screen.availHeight - (window.screenY + window.outerHeight), 
    minScreenSpaceSide = 800, 
    minScreenSpaceTop = 600, 
    screenMargin = 8, 

    width = (screen.availWidth/2.05), 
    height = screen.availHeight, 
    posX = (screen.availWidth/2), 
    posY = 0; 

e.preventDefault(); 

if (screenSpaceRight > screenSpaceLeft && screenSpaceRight > screenSpaceTop && screenSpaceRight > screenSpaceBottom && screenSpaceRight > minScreenSpaceSide) { 
    if (width > screenSpaceRight) { 
     width = screenSpaceRight - screenMargin; 
    } 
    if (posX < (screen.availWidth - screenSpaceRight)) { 
     posX = window.screenX + window.outerWidth + screenMargin; 
    } 
} else if (screenSpaceLeft > screenSpaceRight && screenSpaceLeft > screenSpaceTop && screenSpaceLeft > screenSpaceBottom && screenSpaceLeft > minScreenSpaceSide) { 
    if (width > screenSpaceLeft) { 
     width = screenSpaceLeft - screenMargin; 
    } 

    posX = 0; 
} else if (screenSpaceTop > screenSpaceRight && screenSpaceTop > screenSpaceLeft && screenSpaceTop > screenSpaceBottom && screenSpaceTop > minScreenSpaceTop) { 
    posX = 0; 
    posY = 0; 
    width = screen.availWidth; 
    height = (screen.availHeight/2.05); 
    if (height > screenSpaceTop) { 
     height = screenSpaceTop - screenMargin; 
    } 
} else if (screenSpaceBottom > screenSpaceRight && screenSpaceBottom > screenSpaceLeft && screenSpaceBottom > screenSpaceTop && screenSpaceBottom > minScreenSpaceTop) { 
    posX = 0; 
    width = screen.availWidth; 
    if (window.screenY + window.outerHeight + screenMargin > (screen.availHeight/2)) { 
     posY = window.screenY + window.outerHeight + screenMargin; 
    } else { 
     posY = (screen.availHeight/2); 
    } 
    height = (screen.availHeight/2.05); 
    if (height > screenSpaceBottom) { 
     height = screenSpaceBottom - screenMargin; 
    } 
} 

newWindow = window.open(this.href, "_blank", "width=" + width + ",height=" + height + ",location=yes,menubar=no,resizable=yes,scrollbars=yes,status=yes,menubar=yes,top=" + posY + ",left=" + posX); 

Il vérifie la quantité d'espace disponible à l'écran il y a, et si un montant minimum si elle est disponible (800 x 600), il ouvre la fenêtre là. S'il n'y a pas assez d'espace, il recouvre la fenêtre sur le côté droit de l'écran, en prenant à peu près la moitié de celui-ci.

Notes:

D'abord, il devrait être modifié pour savoir où le montant maximum de l'espace est plutôt que Recherche de gauche arbitrairement, à droite, en haut, en bas. Deuxièmement, je soupçonne que dans certains endroits où screen.availHeight a été utilisé, screen.height devrait être utilisé à la place. De même pour la largeur. C'est parce que nous ne sommes pas trop intéressés par la barre des tâches lorsque nous décidons si l'utilisateur a un second moniteur ou pas (ou beaucoup d'espace sur l'écran).

Troisièmement, cela ne fonctionnera pas dans IE < 8. Cela peut facilement être rectifié en utilisant screenLeft et screenTop plutôt que screenX/screenY, le cas échéant. Quatrièmement, le code est désordonné et pourrait être rendu beaucoup plus élégant que ce qu'il fait. Je ne m'en excuse pas. Cependant, vous ne devez PAS utiliser un JS aussi horrible et inaccessible nulle part et BESOINS pour être réécrit. Je l'ai seulement placé ici parce que c'est dans ma ligne de pensée en ce moment et j'oublierai probablement de poster une bonne solution ici quand j'écrirai ceci correctement car cela n'arrivera pas pendant quelques mois.

Droite. Voilà. Je n'accepte aucune responsabilité pour rendre votre javascript horrible, laid et carrément difficile de faire quoi que ce soit avec. :)