Responsive design utility to get all the dimensions of

getResponsiveDimensions.js

var getResponsiveDimensions = function ($element, minWindowWidth, maxWindowWidth) {
  
  minWindowWidth = minWindowWidth || 320;
  maxWindowWidth = maxWindowWidth || 1280;

  var dimensions = {
    minWidth: Infinity,
    maxWidth: 0,
    minHeight: Infinity,
    maxHeight: 0,
    list: {},
    missing: []
  };
  
  var windowWidthCheck = function (windowWidth) {
    return (minWindowWidth <= windowWidth && windowWidth <= maxWindowWidth);
  };
  
  var shouldNot = null;
  
  var updateMissing = function () {
    for (var i = minWindowWidth; i <= maxWindowWidth; i++) {
      var index = dimensions.missing.indexOf(i);
      if (i in dimensions.list) {
        if (index !== -1) {
          dimensions.missing.splice(index, 1);
        }
      } else if (index === -1) {
        dimensions.missing.push(i);
      }
    }
    
    if (dimensions.missing.length === 960 * 2) {
      console.log(dimensions);
    }
  };

  var saveDimensions = function () {

    var windowWidth = $(window).width();
    if (!windowWidthCheck(windowWidth)) { return; }

    var width = $element.outerWidth();
    var height = $element.outerHeight();

    if (width > dimensions.maxWidth) {
      dimensions.maxWidth = width;
    } else if (width < dimensions.minWidth) {
      dimensions.minWidth = width;
    }
    
    if (height > dimensions.maxHeight) {
      dimensions.maxHeight = height;
    } else if (height < dimensions.minHeight) {
      dimensions.minHeight = height;
    }
    
    dimensions.list[windowWidth] = {
      width: width,
      height: height
    };
    
    updateMissing();
  };

  $(window).on('resize', saveDimensions);
  
  return dimensions;
};

getResponsiveDimensions.md

getResponsiveDimensions

Drop the javascript into the console and call the function on the element you are interested in, like so:

var dimensions = getResponsiveDimensions($('.my-object'));

Then resize the browser window, crazily, or slowly, however you please, until you are satisfied. The data you want will be in dimensions.

dimensions.minWidth, dimensions.maxWidth, dimensions.minHeight, dimensions.maxHeight

You will see the min and max width and height of the element. The accuracy of these numbers depends on how thorough your screen resizing was.

dimensions.missing

A list of window pixel widths not collected. A length of zero guarantees your dimensions are accurate.

dimensions.list

An object with window width as key and dimensions of element in question at that window width.