Viewport Units Buggyfill文档翻译

这是一个 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 不会被解析，可能导致丢失字体和图片。