vimploy–html5 viewport单位兼容包

vimploy

viewport unit[vw/vh] polyfill，一个HTML5 VW/VH 单位JS兼容包。该版本暂时只支持vw/vh 两个单位。

Viewport unit 介绍

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。 这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px（宽）和800px（高）的视窗(Viewport)

• vw ——代表视窗(Viewport)的宽度为1%，在我们的例子里50vw = 500px。
• vh ——窗口高度的百分比 50vh = 400px。
• vmin ——vmin的值是当前vw和vh 中较小的值。在我们的例子里因为是横向模式，所以 50vim = 400px。该版本未实现
• vmax ——大尺寸的百分比。50vmax = 500px。 该版本未实现

使用条件

• 页面必须使用 link 方式引入css，所有inline css及@import的css 将不会被处理。
• link方式引入的css文件必须要与页面同域，所有外域的css文件将不会被处理。
• 此 polyfill 不包含media query的兼容处理，所有不支持media query浏览器，需要使用额外的polyfill处理。

使用方法

在源码中已经提供了使用实例放在sample文件夹；dest 文件夹是合并压缩后的单文件包，src 文件夹下源码包。

• index.html 文件是单文件的使用方式，直接将文件放到body结束之前即可。
• amd.html 文件是使用requireJS的引用方式。使用的时候直接引入 vwpoly 包即可,requirejs.config 方式如下：

requirejs.config({
    baseUrl: "your/js/path",

    paths: {
        modernizr : "path/of/modernizr.custom.96450",
        cssparser : "path/of/cssParser",
        vwpoly : "path/of/vwpoly",
    }
});

原理

• 使用开源css支持检测工具modernizr，检测出浏览器对viewport unit的支持情况。
• 通过使用Ajax技术，加载页面包含的css文件，然后通过css语法分析器[cssParser]，分析出css中包含vw/vh单位的规则。
• 用js计算出viewport的尺寸，动态修改匹配出来的css规则，然后加载到页面的style标签中。

源码

SVN：

http://192.168.33.6/svn/sam/vimploy