欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題

  發(fā)布時(shí)間：2018-09-26 15:45:11   作者：treeandgrass   我要評(píng)論
這篇文章主要介紹了淺談?dòng)龅降膸讉€(gè)瀏覽器兼容性問(wèn)題，詳細(xì)的介紹了幾種我遇到的問(wèn)題和解決方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景

解決瀏覽器的兼容性問(wèn)題是一件很煩的事情，其中并沒(méi)有太多高深的技巧，但是開(kāi)發(fā)需要，也不得不去解決它，最近在開(kāi)發(fā)項(xiàng)目中也遇到一些兼容性的問(wèn)題，希望把這些問(wèn)題的解決方式記錄下來(lái)，下次遇到就直接拿過(guò)來(lái)用，也希望對(duì)他人有一些幫助。

兼容性問(wèn)題及解決方式

1.object-fit在ie11和edge中不兼容，可以一些css hacks

使用background-size和background-position替換object-fit設(shè)置圖片的樣式

<img class="loadingImage" src="url"/>
.loadingImage {
    width: 100%;
    height: 100%;
    transition: all 1s ease;
    object-fit: cover;
  }

上述代碼中可以修改為如下：

<div class="loadingImage"></div>
.loadingImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: url(url);
}

對(duì)于視頻播放，object-fit:cover可以解決視頻不會(huì)隨著屏幕縮放的問(wèn)題

<video class="video"></video>
.video {
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

可以使用如下css設(shè)置video標(biāo)簽，解決object-fit不兼容ie和edge的問(wèn)題

<video class="video"></video>
.video {
  width: 100%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: fill;
}

2.window.onload事件會(huì)在圖片等資源加載完成后執(zhí)行方法，但是它不會(huì)檢測(cè)視頻資源是否加載完成，可以使用如下代碼檢測(cè)視頻是否加載完成

<video id="video"></video>
let video = document.getElementById('video')
if (video.readyState === 4) {
    console.log('finish!')
}

3.css的transition執(zhí)行完成后會(huì)觸發(fā)transitionend事件，但是存在兼容性，可以使用下面代碼解決瀏覽器間的兼容性

function checkTransitionEvent() {
  var el = document.createElement('div')
  var transitions = {
    'transition':'transitionend',
    'OTransition':'oTransitionEnd',
    'MozTransition':'transitionend',
    'WebkitTransition':'webkitTransitionEnd'
  }

  for(t in transitions){
      if( el.style[t] !== undefined ){
          return transitions[t];
      }
  }
}

4.onwheel事件兼容性

support() {
  let support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
    document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
    "DOMMouseScroll";
  return support
},

5.wheel事件的wheelDelta和detail屬性在不同瀏覽器下值不同，可以使用如下代碼對(duì)其進(jìn)行normalize,參考https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

var wheelDistance = function(evt){
  if (!evt) evt = event;
  var w=evt.wheelDelta, d=evt.detail;
  if (d){
    if (w) return w/d/40*d>0?1:-1; // Opera
    else return -d/3;              // Firefox;         TODO: do not /3 for OS X
  } else return w/120;             // IE/Safari/Chrome TODO: /3 for Chrome OS X
};

var wheelDirection = function(evt){
  if (!evt) evt = event;
  return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

6.requestAnimationFrame兼容性

let cancelAnimationFrame = window.cancelAnimationFrame 
  || window.mozCancelAnimationFrame 
  || function(id) { clearTimeout(id) };
let requestAnimationFrame = window.requestAnimationFrame 
  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 
  || window.msRequestAnimationFrame
  || function (callback) { return setTimeout(callback, 1000 / 60) };

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論