项目作者: howion

项目描述 :
Zooming based on windows width
高级语言: JavaScript
项目地址: git://github.com/howion/viewRatio.git
创建时间: 2018-07-29T17:34:22Z
项目社区:https://github.com/howion/viewRatio

开源协议:MIT License

下载


viewRatio-dev

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

Usage

Download and include viewRatio.min.js

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

Options

Name Takes Optional Defaults To
width Int
zoomRatio Float undefined :heavy_check_mark: 1
maxWidth Int undefined :heavy_check_mark: INF
minWidth Int undefined :heavy_check_mark: 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

  1. // CREATE VIEW RATIO OBJECT
  2. var $viewRatio = viewRatio({
  3. maxWidth: 1920, // STOP ZOOMING IF WIDTH IS BIGGER THAN 1920px
  4. minWidth: 480, // STOP ZOOMING IF WIDTH IS SMALLER THAN 480px
  5. width: 1920, // ZOOM WILL BE BASED ON THIS WIDTH
  6. zoomRatio: 0.5, // ZOOM WILL BE 0.5 SLOWER
  7. zoomRatio: 2 // ZOOM WILL BE 2x FASTER
  8. });
  9. // INITAL ZOOM
  10. $viewRatio.scale();
  11. // FIRE SCALE EVENT ON WINDOW RESIZE
  12. 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