Screen/Window/Viewport Width & Mouse event coordinates;

dimensions.js

// SOURCE    : http://xahlee.info/js/js_viewport_dimension.html
// CSS PIXELS: http://xahlee.info/js/web_design_screen_density.html

// user's physical screen dimension/size (Result is in physical pixels)
console.log( screen.width, screen.height );

// user's window size (Result is in CSS pixels)
console.log( window.innerWidth, window.innerHeight );

// viewport size (Result is in CSS pixels)
console.log( 
  document.documentElement.clientWidth, document.documentElement.clientHeight );

// find scroll amount 
console.log(
  document.documentElement.offsetWidth, document.documentElement.offsetHeight);
  
// mouse event coordinates
pageX;   pageY;   // relative to the HTML element in CSS pixels.
clientX; clientY; // the coordinates relative to the viewport.
screenX; screenY; // the coordinates relative to the screen. In physical pixels.