Responsive viewport management tool
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
src
tests
.gitignore
.npmignore
LICENSE.txt
README.md
bower.json
gulpfile.js
package.json

README.md

W 1.7.0

In responsive development with javascript, we often need to know the correct viewport size, without caring of the environment or the media orientation. Desktop browsers return correct values but mobiles are a big mess.

Moreover, we need to know when the text has been resized or the media orientation has changed, so we can adapt our layout accordingly.

W aims to solve this for you.

Please note that if you want to support mobile devices well I advise you to use this meta markup : <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">. This line of code should really be present in any website.

Install

You can pick the minified library or install it with :

npm install pyrsmk-w
bower install pyrsmk-w

Syntax

// Get the orientation of the device (return 'portrait' or 'landscape')
W.getOrientation();
// Get the current viewport width
W.getViewportWidth();
// Get the current viewport height
W.getViewportHeight();
// Get viewport dimensions; returns {width: integer, height: integer}
W.getViewportDimensions();
// Add a listener to catch responsive events (key is optional) (you can register several listeners with the same keyword)
W.addListener(function(){}, 'key');
// Remove a listener
W.removeListener('key');
// Clear all listeners
W.clearListeners();

For ease of use, when you register a listener W returns it, so you can reuse that very same callback :

$(window).listen('scroll', W.addListener(function() {
    console.log("Hi! I'm the one who detects scroll and responsive events!");
}));

You can retrieve viewport's width/height in absolute mode (eg. screen resolution) to unify JS and CSS behaviors :

W.getViewportWidth(true);
W.getViewportHeight(true);

If needed, you can trigger your listeners on demand :

// Trigger all listeners
W.trigger();
// Trigger all listeners registered with the 'key' keyword
W.trigger('key');

You can also manually trigger a listener directly by calling it, since the callback is returned by W :

W.addListener(function(){
	// Blah blah
})();

License

W is licensed under the MIT license.