viewRatio-dev

0.833 kb JS library to zoom page based on window width.

Usage

Download and include viewRatio.min.js

<script src="viewRatio.min.js"></script>

Options

Name	Takes	Optional	Defaults To
width	Int		--
zoomRatio	Float undefined	✔️	1
maxWidth	Int undefined	✔️	INF
minWidth	Int undefined	✔️	0

Methods

.enable() Enables .scale() method

.disable() Disables .scale() method

.scale() Scales based on choices & winWidth

.resetScale() Removes scale

.scaleTo( $customRatio ) Scales to specified ratio

Example Usage

// CREATE VIEW RATIO OBJECT
var $viewRatio = viewRatio({
    maxWidth: 1920, // STOP ZOOMING IF WIDTH IS BIGGER THAN 1920px
    minWidth: 480,  // STOP ZOOMING IF WIDTH IS SMALLER THAN 480px
    width: 1920,    // ZOOM WILL BE BASED ON THIS WIDTH
    zoomRatio: 0.5, // ZOOM WILL BE 0.5 SLOWER
    zoomRatio: 2    // ZOOM WILL BE 2x  FASTER
});

// INITAL ZOOM
$viewRatio.scale();

// FIRE SCALE EVENT ON WINDOW RESIZE
window.addEventListener('resize', $viewRatio.scale, false);

Last Words

First of all making something like this was hard due to cross browser support and it still has some problems so its in development stage for now .

Known Bugs

• Edge & IE shows scrollbars on both sides
• Using fixed position in scaled element causes element to be not fixed. ( See Issue )

License

MIT