遭遇したいくつかのブラウザ互換性の問題について簡単に説明します

遭遇したいくつかのブラウザ互換性の問題について簡単に説明します

背景

ブラウザの互換性の問題を解決するのは非常に面倒なことです。高度な技術はそれほど必要ありませんが、開発のニーズに応じて解決する必要があります。最近、開発プロジェクトでいくつかの互換性の問題に遭遇しました。これらの問題の解決策を記録しておき、次回同じ問題に遭遇したときに直接使用したいと考えています。また、他の人にも役立つことを願っています。

互換性の問題と解決策

1. Object-fitはIE11およびEdgeと互換性がありません。いくつかのCSSハックを使用できます。

画像のスタイルを設定するには、object-fitの代わりにbackground-sizeとbackground-positionを使用します。

<img class="loadingImage" src="url"/>
.loadingImage{
    幅: 100%;
    高さ: 100%;
    遷移: すべて 1 の緩和;
    オブジェクトフィット: カバー;
  }

上記のコードは次のように変更できます。

<div class="loadingImage"></div>
.loadingImage{
    幅: 100%;
    高さ: 100%;
    背景サイズ: カバー;
    背景の位置: 中央;
    背景画像: url(url);
}

ビデオ再生の場合、object-fit:cover を使用すると、ビデオが画面に合わせて拡大縮小されない問題を解決できます。

<ビデオクラス="ビデオ"></ビデオ>
。ビデオ {
  幅: 100%;
  高さ: 自動;
  位置: 相対的;
  左: 50%;
  上位: 50%;
  変換: translate(-50%, -50%);
  オブジェクトフィット: カバー;
}

次の CSS を使用してビデオ タグを設定すると、object-fit が IE および Edge と互換性がない問題を解決できます。

<ビデオクラス="ビデオ"></ビデオ>
。ビデオ {
  幅: 100%;
  高さ: 自動;
  位置: 相対的;
  左: 50%;
  上位: 50%;
  変換: translate(-50%, -50%);
  オブジェクトフィット: 塗りつぶし;
}

2. window.onloadイベントは、画像やその他のリソースが読み込まれた後にメソッドを実行しますが、ビデオリソースが読み込まれたかどうかは検出しません。次のコードを使用して、ビデオが読み込まれたかどうかを検出できます。

<ビデオ id="ビデオ"></ビデオ>
ビデオを document.getElementById('ビデオ') に設定します。
ビデオの準備状態が 4 の場合
    console.log('完了!')
}

3. CSSトランジションが実行されると、transitionendイベントがトリガーされますが、互換性があります。次のコードを使用して、ブラウザ間の互換性を解決できます。

関数 checkTransitionEvent() {
  var el = document.createElement('div')
  var 遷移 = {
    '遷移':'遷移終了',
    'OTransition':'oTransitionEnd',
    'MozTransition':'遷移終了',
    'WebkitTransition':'webkitTransitionEnd'
  }

  for(t in transitions){
      if(el.style[t] !== 未定義){
          transitions[t]を返します。
      }
  }
}

4. オンホイールイベントの互換性

サポート() {
  let support = "onwheel" in document.createElement("div") ? "wheel" : // 最近のブラウザは "wheel" をサポートしています
    document.onmousewheel !== undefined ? "mousewheel" : // Webkit と IE は少なくとも "mousewheel" をサポートしています
    "DOMMouseScroll";
  返品サポート
},

5. ホイールイベントのwheelDelta属性とdetail属性は、ブラウザによって値が異なります。次のコードを使用して正規化できます。https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsersを参照してください。

var ホイール距離 = function(evt){
  if (!evt) evt = イベント;
  var w = evt.wheelDelta、d = evt.detail;
  もし(d){
    if (w) return w/d/40*d>0?1:-1; // オペラ
    そうでない場合は -d/3 を返します。 // Firefox; TODO: OS X では /3 を実行しないでください。
  } else return w/120; // IE/Safari/Chrome TODO: Chrome OS X の場合は /3
};

var ホイール方向 = function(evt){
  if (!evt) evt = イベント;
  戻り値 (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

6. requestAnimationFrameの互換性

cancelAnimationFrame = window.cancelAnimationFrame とします。 
  || window.mozCancelAnimationFrame 
  || 関数(id) { clearTimeout(id) };
requestAnimationFrame = window.requestAnimationFrame とします。 
  || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 
  || window.msRequestAnimationFrame
  || 関数 (コールバック) { return setTimeout(コールバック, 1000 / 60) };

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL複合インデックスの詳細な研究

>>:  XHTML Web ページ チュートリアル

推薦する

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...

スネークゲームのウェブ版を実装するためのJavaScript

この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...

Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します

目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...

HTML フォームタグチュートリアル (4):

ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法

本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

Linux のタイムドログ削除を実装する簡単な方法

導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

CocosCreatorでリストを作成する方法

CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...

HTML マルチメディア アプリケーション: Web ページにフラッシュ アニメーションと音楽を挿入する

1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...