2016-07-02 2 views
2

Je travaille sur un carrousel de photos. Le but est d'afficher x images sur une ligne où x dépend de la taille de la fenêtre. Par viewport, je veux dire la zone à l'intérieur de la fenêtre du navigateur moins les barres de défilement. Les photos sont redimensionnées à une largeur de 200 Si la largeur de la fenêtre est de 2000, je peux obtenir 10 photos (200 * 10 = 2000) (J'ai gardé l'arithmétique facile)Trouver la taille de l'écran en utilisant JS sur un moniteur 4k

Ma résolution d'écran est 3840x2160. J'ai élargi le navigateur pour occuper tout l'écran. Quand j'utilise: $ (window) .width() je viens avec 1707 et avec screen.width je viens avec 1707. Certainement pas 3840.

Lorsque je redimensionne le navigateur de sorte qu'il occupe environ la moitié de l'écran Je reçois: $ (window) .width() de 929 et avec screen.width 1706.

Pour les navigateurs j'utilise Edge, IE11, FF et Chrome 46 et je rencontre à peu près le même problème.

Mon moniteur de bureau est également en 4k et d'après ce que j'ai lu il se compose de deux panneaux de 1920x1080 pour un total de 3840x2160. Si c'est vrai, sur mon moniteur 4k portable, je devrais obtenir une largeur de 1920 en utilisant screen.width, si je prends l'écran entier, mais je ne suis pas.

Je dois prendre en compte que la plupart des gens qui visitent ce site n'auront pas 4k moniteurs.

Des idées sur la façon dont je peux obtenir la largeur de l'écran sur un moniteur 4k?

Répondre

1

Pour obtenir les dimensions des fenêtres:

var width = window.innerWidth; 
var height = window.innerHeight; 

Pour obtenir les dimensions de l'écran:

var width = screen.width; 
var height = screen.height; 
+0

Non. Comme je l'ai mentionné dans mon post, screen.width me donne 1707. Avec la fenêtre du navigateur maxed en utilisant window.innerWidth, je reçois 1707 aussi. Les deux sont 1707. Je suppose que les dimensions sont en pixels. C'est un ordinateur portable 4K ou UHD. – eric

+0

C'est très étrange ... Je vais chercher l'origine du problème. – ClementNerma

0

Javascript doit me rendre compte de mon 4K surveiller la résolution de l'écran 3840 x 2160. En fait, je reçois:

  • screen.width = 2560
  • screen.height = 1440
  • document.querySelector ('html') clientWidth = 2526
  • window.innerWidth = 2526
  • .
  • window.outerWidth = 2575
  • document.querySelector ('html'). clientHeight = 1301
  • window.innerHeight = 1301
  • windo w.outerHeight = 1415
  • screen.availWidth = 2560
  • screen.availHeight = 1400

40 pixels est la barre des tâches 10 au bas de l'écran.