年間に経験した互換性の問題
1776 ワード
面接のたびに互換性の問題の解決を聞かれたり、自分が出会った問題がどのように解決されたのか忘れたりして、いっそ今日記録しておきます.
1、chromeブラウザの下でフォントが12ピクセル未満をサポートしない
2、一部のモバイル端末装置はvedioとaudioの自動再生をサポートしていない
解決策は,まずユーザtouchstartでタッチし,再生をトリガして一時停止する(オーディオのロードを開始し,その後JSで操作すれば問題ない)コードである.
3、iosシステムの下でクリックするイベントは300 msの遅延がある
この問題はiosシステムの下にデフォルトのダブルクリック拡大ページ(double tap to zoom)のスキームがあるため,最初のユーザtapイベントが検出されるとしばらく時間がかかり,その時間内に新しいtapが検出されるとダブルクリックイベントと判断し,逆にクリックイベントと判断し,この遅延時間は300 ms程度である.
ソリューション:FastClickは、FTLabsがモバイルブラウザの300ミリ秒クリック遅延問題を解決するために開発した軽量級のライブラリです.FastClickの実現原理は,touchendイベントが検出されると,DOMカスタムイベントを介して直ちにclickイベントをシミュレートし,ブラウザの300 ms後のclickイベントを阻止することである.
4、低バージョンブラウザはgetElementByClassNameをサポートしていない
解決策はgetByClass()関数を書き換えることです.
5、原生ajax中低バージョンieはxmlhttprequestオブジェクトをサポートしない
解決策は、xmlhttprequestメソッドがある場合に呼び出され、ない場合はieブラウザのActiveXobjectメソッドに変更されると判断することです.
以上は私が考えることができて、后でもし新しい问题があるならば、私は引き続き更新して、関心に感谢します.
1、chromeブラウザの下でフォントが12ピクセル未満をサポートしない
transform:scale(0.8)
というcss 3属性によって解決される2、一部のモバイル端末装置はvedioとaudioの自動再生をサポートしていない
解決策は,まずユーザtouchstartでタッチし,再生をトリガして一時停止する(オーディオのロードを開始し,その後JSで操作すれば問題ない)コードである.
document.addEventListener('touchstart',function() {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
3、iosシステムの下でクリックするイベントは300 msの遅延がある
この問題はiosシステムの下にデフォルトのダブルクリック拡大ページ(double tap to zoom)のスキームがあるため,最初のユーザtapイベントが検出されるとしばらく時間がかかり,その時間内に新しいtapが検出されるとダブルクリックイベントと判断し,逆にクリックイベントと判断し,この遅延時間は300 ms程度である.
ソリューション:FastClickは、FTLabsがモバイルブラウザの300ミリ秒クリック遅延問題を解決するために開発した軽量級のライブラリです.FastClickの実現原理は,touchendイベントが検出されると,DOMカスタムイベントを介して直ちにclickイベントをシミュレートし,ブラウザの300 ms後のclickイベントを阻止することである.
4、低バージョンブラウザはgetElementByClassNameをサポートしていない
解決策はgetByClass()関数を書き換えることです.
function getByClass(obj,sClass){
var aResult = [];
if(obj.getElementsByClassName){
aResult = obj.getElementsByClassName(sClass);
}else{
var aEle = obj.getElementsByTagName('*');
for(var i=0;i
5、原生ajax中低バージョンieはxmlhttprequestオブジェクトをサポートしない
解決策は、xmlhttprequestメソッドがある場合に呼び出され、ない場合はieブラウザのActiveXobjectメソッドに変更されると判断することです.
if(window.XMLHttpRequest){
var oAjax=window.XMLHttpRequest
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
以上は私が考えることができて、后でもし新しい问题があるならば、私は引き続き更新して、関心に感谢します.