Repository files navigation

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

Download and includeviewRatio.min.js

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

.enable() Enables.scale() method

.disable() Disables.scale() method

.scale() Scales based onchoices & winWidth

.resetScale() Removes scale

.scaleTo( $customRatio ) Scales to specified ratio

// CREATE VIEW RATIO OBJECTvar$viewRatio=viewRatio({maxWidth:1920,// STOP ZOOMING IF WIDTH IS BIGGER THAN 1920pxminWidth:480,// STOP ZOOMING IF WIDTH IS SMALLER THAN 480pxwidth:1920,// ZOOM WILL BE BASED ON THIS WIDTHzoomRatio:0.5,// ZOOM WILL BE 0.5 SLOWERzoomRatio:2// ZOOM WILL BE 2x  FASTER});// INITAL ZOOM$viewRatio.scale();// FIRE SCALE EVENT ON WINDOW RESIZEwindow.addEventListener('resize',$viewRatio.scale,false);

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

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

MIT