Observe changes in the viewport and adapt your UIs accordingly.
Viewport State Manager can be consumed as a CommonJS module using browserify.
npm install viewport-state-manager
var ViewportStateManager = require('viewport-state-manager');
var manager = new ViewportStateManager({
ranges: {
desktop: [1025, 5000],
tablet: [768, 1024],
handheld: [1, 767]
},
callback: function (currentState, previousState) {
// ...
}
});ViewportStateManager is AMD compliant, so you can use it with require.js.
// Configure RequireJs
requirejs.config({
paths: {
'viewportStateManager' : 'path/to/viewport-state-manager'
}
});
define(['viewportStateManager'], function (ViewportStateManager) {
var manager = new ViewportStateManager({
ranges: {
desktop: [1025, 5000],
tablet: [768, 1024],
handheld: [1, 767]
},
callback: function (currentState, previousState) {
// ...
}
});
});<html>
<head></head>
<body>
<script src="viewport-state-manager.js"></script>
<script>
var manager = new ViewportStateManager({
ranges: {
desktop: [1025, 5000],
tablet: [768, 1024],
handheld: [1, 767]
},
callback: function (currentState, previousState) {
// ...
}
});
</script>
</body>
</html>Type: Object
// key – breakpoint name
// value – min, max array of pixel dimensions
tablet: [768, 1024]- default –
desktop: [1025, 5000], tablet: [768, 1024], handheld: [1, 767]
Function to be invoked each time a breakpoint threshold is crossed
Type: Function
function (currentState, previousState) { /* ... */ };currentState- Type: String - The name of the breakpoint you are currently inpreviousState- Type: String - The name of the breakpoint you exited from
Duration of debounce set on the window resize or orientationchange events
Type: Number
- default:
250
The default viewport state. Note: This will automatically be set on instantiation if no argument is supplied
Type: String
- default:
''
IE9+, Chrome, Firefox, Safari, Android 2.3+, iOS 5+. You know, the good stuff!