jViewport v0.4.2

What is jViewport?

jViewport is a jQuery plugin to aid in responsive design. It allows you to see the width of the window in real time. If you adjust the widow size, it will auto update with the correct measurements. jViewport will also display a device that the current width is in range of.

Demo

View a demo at http://cibgraphics.com/workshop/jviewport/

Any dependencies?

Just jQuery.

Ok, good to go. How do I use it?

Grab the latest copy from Github and include it into your website.

After that just initialize it. No selector is needed. It will do everything by itself.

  $(function() {

    $.jviewport();

  });

You should now be up and running. No additional files like images or css needed.

Options

Any good plugin has options, and while jViewport can run just fine without setting anything, you can customize it to your needs.

Apply settings like this:

  $(function() {

    $.jviewport({
      setting: value
    });

  });

Below are a list of options what value they take and what the default setting is.

Option	Argument Type	Default	Description
selector	string	body	Where the plugin will append the information to
position	string	fixed	CSS Argument as to what position style the information will be
backgroundColor	string	#333	Background color of the information
fontSize	integer	11	Font size
textColor	string	#85afc3	Text color
height	integer	25	Height of the container. Also controls line-height
display	boolean	true	Displays container. Setting to false turns the plugin off
device	boolean	true	(NEW) If true, displays the device the current width is in range of

Changelog

Version 0.5

• Better calculation of Viewport
• Better font display
• Better rendering if user has margin or padding on HTML or Body elements
• Better rendering if page has vertical scrollbars or not

Version 0.4.2

• Fixed wrong size for Kindle Fire

Version 0.4.1

• Fixed device calculation
• Fixed device names

Version 0.4

• New Feature: Device ranges
• Updated default text color
• Took out double window resize call

Version 0.3

• Added options

Version 0.2

• Self running plugin

Version 0.1

• Initial code

Wish List Features

This is more of a wish list and doesn't really say what I am currently working on

• Toggle button for Firefox's Responsive Design Tool
• Feature to mimic Firefox's Responsive Design Tool but have it work in all modern browsers