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

Category: Javascript | November 25, 2015
Author: nerijusgood
Views Total: 508 views
Official Page: Go to website
Last Update: November 25, 2015
License: MIT

Preview:

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

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;"

You Might Be Interested In:


Leave a Reply