jQuery Plugin View Current Breakpoint Information in Responsive Web Page | rwdKit

How to make use of it:

1. Download and insert the rwdUtility plugin after the most recent jQuery library.

<script src="/path/to/cdn/jqueryslim.min.js"></script>
<script src="/path/to/jquery.rwdKit.js"></script>

2. Initialize the plugin to generate the breakpoint detector in a particular container or the entire doc.

$(function(){
  $(document).rwdKit();
});

// or
$(function(){
  $('body').rwdKit();
});

// or
$(function(){
  $('.container').rwdKit();
});

3. Override the default media queries breakpoints.

$(document).rwdKit({
  media: {
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1599,
  }
});

4. Change the position of the breakpoint detector.

$(document).rwdKit({
  position: 'top'
});

5. Determine whether or not to indicate the breakpoint change data within the console log as an alternative.

$(document).rwdKit({
  console: true
});

6. Customize the looks of the breakpoint detector.

$(document).rwdKit({
  color: 'white',
  backgroundColor: 'rgba(14,120,200,.9)',
});

7. Force to make use of Bootstrap 3 breakpoints. False = Uses Bootstrap 4 breakpoints.

$(document).rwdKit({
  bootstrap3: false
});

Breakpoint Detection In jQuery, jQuery rwdKit 2 Plugin/Github, screen sizes for responsive design

See Demo And Download