A JavaScript Library To Test Elements In Various Window Sizes – Viewport Resizer

Preview:

Description:

Viewport Resizer is a JavaScript tool for responsive web design that allows you to test html elements in multiple types of screen.

Predefined screen sizes:

• Desktop: 1280px
• Horizontal Tablet: 1024px
• Tablet: 768px
• Mobile: 320px

How to use it:

To get started just download the viewport resizer and include the JavaScript file viewpr.min.js in the html document.

<script src="viewpr.min.js"></script>

Initialize the Viewport Resizer.

window.onload = function () {
  viewpr(params = {
      // parameters here
    });
}

All default parameters.

viewports: [{
  size: "320",
  name: "Mobile"
}, {
  size: "768",
  name: "Tablet"
}, {
  size: "1024",
  name: "Desktop"
}],
showName: true,
svg: false,
reset: "reset",
wrapper: "viewpr-content",
links: "viewpr-list",
animation: "-webkit-transition:width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -ms-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; transition: width .3s ease-in-out;"