这是一个 buggyfill (修复缺陷功能), 不是一个 polyfill (添加没有的功能). 也就是说,它提供 hacks 使得你可以在旧版本IE和安卓老版本浏览器使用 viewport 单位。如果浏览器不知道如何处理 viewport units - vw
, vh
, vmin
和 vmax
- 这个库不会有所帮助,除非你使用了 hacks. buggyfill 通过 CSSOM 访问css而不是通过自定义css解析器, 这就是 hacks 通过 content
属性获得值的原因.
此外, buggyfill 解决如下问题:
- 移动端Mobile Safari中的viewport units (vh|vw|vmin|vmax) i
- 移动端Safari 和IE9+ (hack)
calc()中的
viewport units - IE9+ (hack) 中的
vmin
,vmax
- 安卓旧浏览器 (hack)中的viewport units
buggyfill 遍历所有的样式,抽取其中使用 viewport 单位的. 根据视口解析相对单位尺寸后, 生成CSS 注入到document <style>
标签中. 它会监听 orientationchange
事件,并重新计算
hacks 使用 content
属性传递 viewport-unit 样式给计算脚本, 这样做是因为不支持的浏览器么有暴露相关的声明,如: height: calc(100vh - 10px)
:
content: 'viewport-units-buggyfill; width: 50vmin; height: 50vmax; top: calc(50vh - 100px); left: calc(50vw - 100px);';
注意:
content
在<img>
和其他可替换元素上可能不能很好的工作, 尽管它在一般元素上应该转化成content: normal;
如果你发现自己遇到这种情况, 可以通过下面方式解决:img {
content: normal !important;
}
注意: buggyfill 只在样式表中起作用! 在
style
属性中不会被解析
注意: buggyfill 可以在毫无障碍地访问不同域名的文件 (需要CORS) 和样式表中的相对 URLs images/fonts/… . #11
// 1、安装buggyfill
npm install viewport-units-buggyfill
// 或者
bower install viewport-units-buggyfill
// 2、初始化
require('viewport-units-buggyfill').init();
使用script引入方式
<script src="viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init();</script>
使用 hacks
var hacks = require('viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
hacks: hacks
});
避免某些样式被处理, 添加 data-viewport-units-buggyfill="ignore"属性
:
<link rel="stylesheet" href="file-to-ignore.css" data-viewport-units-buggyfill="ignore">
<link rel="stylesheet" href="file-to-process.css">
API
viewport-units-buggyfill
暴露如下 API:
var viewportUnitsBuggyfill = require('viewport-units-buggyfill');
// 只关注Mobile Safari 和IE9+
viewportUnitsBuggyfill.init();
// 忽略 user agent 强制初始化
viewportUnitsBuggyfill.init({force: true});
//减少在IE中调整窗口大小时重新初始化buggyfill的次数
viewportUnitsBuggyfill.init({refreshDebounceWait: 250});
// 支持下面浏览器
// * vmin in IE9
// * vmax in IE9, iOS <= 6
// * calc(vh/vmin) in iOS < 8 和 Android Stock Browser <= 4.4
// * Android Stock Browser <= 4.3
//
// 你需要加载 hacks 文件:
<script src="/path/to/viewport-units-buggyfill.hacks.js"></script>
viewportUnitsBuggyfill.init({hacks: window.viewportUnitsBuggyfillHacks});
// 将转化后的样式插入body 而不是 head
viewportUnitsBuggyfill.init({appendToBody: true});
// 更新内部缓存并重新计算px样式
viewportUnitsBuggyfill.refresh();
//您可以手动执行操作(无需样式元素注入):
//使用视口单位标识所有声明
viewportUnitsBuggyfill.findProperties();
var cssText = viewportUnitsBuggyfill.getCss();
在CSS 中你可以申明被 buggyfill's hacks使用的回退fallbacks
.my-viewport-units-using-thingie {
width: 50vmin;
height: 50vmax;
top: calc(50vh - 100px);
left: calc(50vw - 100px);
/* hack to engage viewport-units-buggyfill */
content: 'viewport-units-buggyfill; width: 50vmin; height: 50vmax; top: calc(50vh - 100px); left: calc(50vw - 100px);';
}
buggyfill 在初始化之前触发 viewport-unit-buggyfill-init事件,并在修复样式后触发
viewport-unit-buggyfill-style
. The events are dispatched on window
and may be used as follows:
window.addEventListener('viewport-unit-buggyfill-init', function() {
console.log('getting lost in CSSOM');
});
window.addEventListener('viewport-unit-buggyfill-style', function() {
console.log('updated rules using viewport unit');
});
跨域样式表
警告: 从第三方服务器引入样式表, 如 Google WebFonts, 需要这些资源带有合适的 CORS headers. 你必须注意样式表中的相对地址 URLs 不会被解析,可能导致丢失字体和图片。