Javascript Girl
  1. Javascript Girl
  3. Détecter la largeur de l'écran pour plusieurs moniteurs
Intereting Posts
JsTree: Comment obtenir les ID des nœuds sélectionnés sur le nœud racine dans jsTree? Angularjs définit un en-tête d'autorisation Comment implémenter un effet de suivi de défilement multidirectionnel? Est-ce que React prune automatiquement les composants qui ont retiré leurs points de montage du DOM? Comment utiliser les propriétés d'un objet littéraire sans être dans une fonction en javascript WebGl ajoutant plusieurs objets à un seul canevas Téléchargement d'une image en utilisant XMLHttpRequest dans un utilisateur Affectation en javascript et le mot-clé var Google Chrome déclenche un mauvais comportement avec l'iframe Javascript étend la classe Ajout de texte de recherche par défaut dans la zone de recherche html JQuery équivalent à "getElementsByName" Les tableaux Javascript ne peuvent-ils pas être égaux? Balises HTML dans la méthode Javascript Alert () Angularjs "Controller as" ou "$ scope"

Détecter la largeur de l'écran pour plusieurs moniteurs

Mon site est optimisé (avec une largeur fixe) pour la mise en page 1024×768. J'ai l'intention d'ajouter des bannières verticales de chaque côté de la page pour les personnes ayant une largeur de résolution de 1280 ou supérieure.

À l'aide de screen.width, je peux facilement le faire. Mais je fais face à un problème lors de l'essai sur des machines avec plusieurs moniteurs.

Supposons le scénario ci-dessous:
Moniteur 1 (affichage principal) – La résolution est de 1024 x 768
Moniteur 2 (affichage secondaire) – La résolution est de 1440 x 900

Screen.width affiche toujours la largeur comme 1024 indépendamment du moniteur sur lequel je parcourt la page. Les valeurs sont inversées si je change le moniteur principal sur Monitor 2.

C'est un gros problème, surtout pour les personnes ayant une résolution de 1024×768 en tant que résolution principale. Cela signifie que je pourrais éventuellement perdre des impressions de bannière dans de tels scénarios.

J'apprécierais vraiment toute aide à ce sujet.

Essayez de regarder window.innerWidth (la largeur de la page Web à l'écran) au lieu de window.screen.width .

Merci pour votre réponse duskwuff. J'ai aidé à compiler la fonction ci-dessous qui m'a résolu le problème. 

 function getBrowserWith() { if(($.browser.msie == true && $.browser.version == '9.0') || $.browser.webkit == true || $.browser.mozilla == true) return window.innerWidth; else if(($.browser.msie == true) && ($.browser.version == '7.0' || $.browser.version == '8.0')) return document.documentElement.clientWidth; else return screen.width; }

Notes IMPORTANTES

  1. JQuery 1.4+ est requis
  2. Notez que la fonction ci-dessus n'a été testée que pour les navigateurs IE7 +, FF7 + et Chrome16 +.

Pour Javascript, vous pouvez l'utiliser de cette façon dans le code: 

 var width = new Array(); var height = new Array(); var screens = java.awt.GraphicsEnvironment.getLocalGraphicsEnvironment().getScreenDevices(); for(var i = 0;i<screens.length; i++){ var config = screens[i].getConfigurations(); var bounds = config[0].getBounds(); width[i] = bounds.getWidth(); height[i] = bounds.getHeight(); }

Maintenant, vous pouvez utiliser la width[0] , la width[1] et comme pour que Height puisse obtenir les détails.

Si vous souhaitez obtenir les configurations du moniteur sur lesquelles le curseur de la souris pointe actuellement: 

 var screen, config,width, height; screen = java.awt.MouseInfo.getPointerInfo().getDevice(); config = screen.getConfigurations(); width = config[0].getBounds().getWidth(); height = config[0].getBounds().getHeight();