This time I will share jQuery Plugin and tutorial about jQuery Plugin To Scale Web Elements Based On Screen Size – Smartzoom, hope it will help you in programming stack.
Smartzoom is a jQuery plugin that automatically scales web elements and font sizes based on the screen size to provides better readability across the platforms.
How to use it:
1. Add the following meta viewport in the head
of the document.
1 |
< meta name = "viewport" content = "width=device-width, initial-scale=1" > |
3 |
< meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" > |
2. Use relative units (e.g. em, percent) for font-size handling.
3. Link to jQuery library and the jQuery Smartzoom plugin like this:
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "jquery.smartzoom.min.js" ></ script > |
4. Invoke the plugin with default settings.
1 |
$.smartzoom.initialize(); |
5. Set the font size when scaling.
1 |
$.smartzoom.initialize({ |
6. Set break point (screen width) to trigger the auto scaling.
1 |
$.smartzoom.initialize({ |
This awesome jQuery plugin is developed by getphuture. For more Advanced Usages, please check the demo page or visit the official website.