遇到的幾個瀏覽器兼容性問題

YacaToy 發布于2019-08-02 11:36 / 3046人閱讀

摘要：背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。

背景
解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。

兼容性問題及解決方式

1.object-fit在ie11和edge中不兼容，可以一些css hacks
使用background-size和background-position替換object-fit設置圖片的樣式

.loadingImage {
    width: 100%;
    height: 100%;
    transition: all 1s ease;
    object-fit: cover;
  }

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


.loadingImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: url(url);
}

對于視頻播放，object-fit:cover可以解決視頻不會隨著屏幕縮放的問題


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

可以使用如下css設置video標簽，解決object-fit不兼容ie和edge的問題


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

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


let video = document.getElementById("video")
if (video.readyState === 4) {
    console.log("finish!")
}

3.css的transition執行完成后會觸發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屬性在不同瀏覽器下值不同，可以使用如下代碼對其進行normalize,參考https://stackoverflow.com/que...

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) };

GPU云服務器云服務器用到的幾個函數云主機的幾個品牌使用遇到問題布局遇到的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52997.html

遇到的幾個瀏覽器兼容性問題

摘要：背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決...

JeOam 2019-08-23 12:07 評論0 收藏0
遇到的幾個瀏覽器兼容性問題

摘要：背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發需要，也不得不去解決它，最近在開發項目中也遇到一些兼容性的問題，希望把這些問題的解決...

isLishude 2019-08-30 15:54 評論0 收藏0
學習筆記：讓元素永久置底的幾種方案（css only）

摘要：我們權且把這種解決方案叫術語解釋顧名思義就是使用來實現有粘性的置底元素。下面就為大家講講幾種解決方案，以及這些解決方案的優缺點和兼容性。前言很多同學在使用css+html寫頁面的時候，可能會遇到這樣的場景：頁面除了頭部和底部外，中間部分的內容為空時，頁面就會出現底部向上頂，也就是頭部和底部黏在一起了。最近開發頁面，也遇到了這個問題，經過查閱很多文章和資料后，整理出這篇文章，希望...

caikeal 2019-08-30 13:09 評論0 收藏0
CSS 最核心的幾個概念

摘要：本文將講述中最核心的幾個概念，包括盒模型等。塊級元素的默認為，而內聯元素則是根據其自身的內容或子元素來決定其寬度。如果該元素的下一個兄弟元素中有內聯元素通常是文字，則會圍繞該元素顯示，形成類似文字圍繞圖片的效果。本文將講述 CSS 中最核心的幾個概念，包括：盒模型、position、float等。這些是 CSS 的基礎，也是最常用的幾個屬性，它們之間看似獨立卻又相輔相成。為了掌握它們...

SwordFly 2019-08-28 17:51 評論0 收藏0
Python的中文編碼問題

摘要：使用中文替代中文中文編碼中文編碼中有以上兩種聲明字符串變量的方式，它們的主要區別是編碼格式的不同，其中，的編碼格式和文件聲明的編碼格式一致，而的編碼格式則是。字符串是Python中最常用的數據類型，而且很多時候你會用到一些不屬于標準ASCII字符集的字符，這時候代碼就很可能拋出UnicodeDecodeError: ascii codec cant decode byte 0xc4 ...

Cheriselalala 2019-07-31 11:35 評論0 收藏0