Breakpoint Detection In jQuery - rwdKit

Breakpoint Detection In jQuery - rwdKit
File Size: 7.54 KB
Views Total: 693
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

rwdKit is a breakpoint detector for developers that detects breakpoint changes and creates a debug bar to display the current media/device type and viewport size after window resize.

How to use it:

1. Download and insert the rwdUtility plugin after the latest 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 specific container or the whole document.


// or

// or

3. Override the default media queries breakpoints.

  media: {
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1599,

4. Change the position of the breakpoint detector. Default: 'bottom'.

  position: 'top'

5. Determine whether to show the breakpoint change info in the console log instead. Default: false.

  console: true

6. Customize the appearance of the breakpoint detector.

  color: 'white',
  backgroundColor: 'rgba(14,120,200,.9)',

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

  bootstrap3: false


v2.3 (2021-05-17)

  • Add navigation breakpoint in iframe view
  • Change jquery each function by native for of
  • Fix error width size when iframe load

v2.2 (2021-02-24)

  • Change filename

v2.1 (2020-12-06)

  • Added iframe width in an input to change precisely the size
  • Fixed iframe width calculation

v2.0 (2020-11-07)

  • Add F4 key to reload page without cache
  • Add mobile view in iframe
  • Add reload button
  • Bootstrap 4 default param
  • Remove font-size param

v1.2 (2020-05-11)

  • rename plugin name
  • modify design of toolbar


  • v1.1.0: Added Bootstrap 4 option


This awesome jQuery plugin is developed by avantage-digital. For more Advanced Usages, please check the demo page or visit the official website.