Viewport Resizer

A tiny vanilla javascript module that helps you resize a div or element to your desired viewports. Case use would be resizing viewports to emulate devices on your website or app.

Install

npm install --save viewport-resizer

Usage

Require:

var viewportResizer = require('viewport-resizer');

The function:

viewportResizer.viewpr(options);

Add markup:

<div id="viewpr-list">
    Viewport size links
</div>

<div id="viewpr-content">
    Content that will be resized
</div>

Options

Add custom viewports

Example shows default settings:

var options = {
    viewports : [
        {
            size: '320',
            name:  'Mobile'
        },
        {
            size: '768',
            name:  'Tablet'
        },
        {
            size: '1024',
            name: 'Horizontal Tablet'
        },
        {
            size: '1280',
            name: 'Desktop'
        }
    ]
};

Available options

showName: boolean

If set to true shows the name of the viewport, else size number.

svg: boolean

If set to true adds svg use to markup to allow svg sprite icons (demo).

reset: string

Set custom name to reset button (dafault reset)

wrapper: string

Change the id name of wrapper of content (dafault viewpr-content)

links: string

Change the id name of link wrapper (dafault viewpr-list)

animation: string

Change inlined css on wrapper item (default -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;)

Example

var options = {
    viewports : [
        {
            size: '320',
            name:  'Mobile'
        },
        {
            size: '480',
            name: 'Mobile Horizontal'
        },
        {
            size: '1280',
            name: 'Monitor'
        }
    ],
    showName: true,
    reset: 'Original',
    animation: ''
};

This example will create only 3 viewports with custom reset button name and no animation.