背景 ブラウザの互換性の問題を解決するのは非常に面倒なことです。高度な技術はそれほど必要ありませんが、開発のニーズに応じて解決する必要があります。最近、開発プロジェクトでいくつかの互換性の問題に遭遇しました。これらの問題の解決策を記録しておき、次回同じ問題に遭遇したときに直接使用したいと考えています。また、他の人にも役立つことを願っています。 互換性の問題と解決策 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 を応援していただければ幸いです。 |
コンテナを作成する [root@server1 ~]# docker run -it --name ...
先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...
目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
導入Linux は、ファイル、ログ、電子メール、バックアップなどを自動的に生成できるシステムです。ハ...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...
1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...
01PARTCoreWebApiチュートリアルローカルデモ環境Visual Studio2019--...