モバイル側css互換性の問題のまとめ
6459 ワード
h 5ページで卵が痛いのは、入力ボックスが一番下にある場合、ソフトキーボードをクリックすると入力ボックスが遮られるという問題です.以下の方法で解決できる
var oHeight = $(document).height();//ブラウザの現在の高さKaTeX parse error:Expected'}',got'EOF'at end of input:...function(){if((document).height()http://efe.baidu.com/blog/mobile-fixed-layout/
5.Android携帯電話にメールボックスを認識させない6.iOSが長い数字を電話7と認識することを禁止する.iOSの各種操作ウィンドウのイジェクトを禁止する-webkit-touch-callout:none 8.transitionフラッシュの削除-webkit-transform-style:preserve-3 d;/*埋め込まれた要素を3 D空間でどのように表示するかを設定します:3 D*/-webkit-backface-visibility:hidden;/*(変換する要素の背面がユーザーに対して表示されるかどうかを設定:非表示)*/9.iOSシステムの中国語入力方式で英語を入力すると、アルファベットの間に6分の1のスペースが表示される可能性があります.value = this.value.replace(/\u2006/g, '');
10.iosおよびandroidユーザーのテキスト選択を禁止-webkit-user-select:none 11.iosとandriodではaudio要素とvideo要素が自動的に再生できない対応策:タッチスクリーンで放送
$(‘html’).one(‘touchstart’,function(){ audio.play() }) 12.iosの下でinputの入力時の英語の頭文字のデフォルトの大文字13をキャンセルします.androidで音声ボタンの入力をキャンセルinput::-webkit-input-speech-button{display:none}14 CSSアニメーションページフラッシュ、アニメーションカートン
解決方法:1.合成属性transformおよびopacityを使用するCSS 3のアニメーションを可能な限り設計し、positionのleftおよびtopを使用する位置決め2を使用しない.ハードウェアアクセラレータ-webkit-transform:translate 3 d(0,0,0);moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
16.fixed位置決め欠陥ios下fixed要素の位置決めエラーが発生しやすい.ソフトキーボードがイジェクトされた場合、fixed要素の位置決めに影響するandroid下fixedの表現はiOSよりもよく、ソフトキーボードがイジェクトされた場合、fixed要素の位置決めに影響しないios 4下で解決策をサポートしない:iScrollプラグインでこの問題を解決することができる17.スクリーンの回転を阻止するフォントサイズhtml,body,form,fieldset,p,div,h 1,h 2,h 3,h 4,h 5,h 6{-webkit-text-size-adjust:none;}18 Inputのplaceholderでテキスト位置が上になる場合inputのplaceholderでテキスト位置が上になる場合:PC側でline-heightを設定するとheightが位置合わせできるのに等しく、移動側は上になるので、line-height:normalを設定することになります
19往復キャッシュの問題ブラウザのロールバックをクリックすると、jsが自動的に実行されない場合があります.特にmobilesafariでは.これは往復キャッシュ(bfcache)と関係がある.
解決方法:window.function(){}; 20.calcの互換性処理CSS 3のcalc変数はiOS 6ブラウザに-webkit-接頭辞を付けなければならない.現在のFFブラウザには-moz-接頭辞は必要ない.Androidブラウザは現在もcalcをサポートしていないので、以前に保守的なサイズを追加します.
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } 21 iOS 6の擬似クラス:hover以外の要素は無効です.Androidでは有効です.に似ている
div#topFloatBar_l:hover #topFloatBar_menu { display:block; } このようなナビゲーション表示はiOS 6でクリックしてもクリック効果はなく,クリックリスナーを増やして要素にclassを増減させることでサブ要素を制御するしかない.
22移動端で見苦しいクリックのハイライト効果を修正し、iOSとアンドロイドの下で有効です. {-webkit-tap-highlight-color:rgba(0,0,0,0);} しかし、この方法は現在のアンドロイドブラウザの下で、そのオレンジ色の背景色を消すしかなく、クリックして生成したハイライトの枠はまだ取り除かれていないので、解決しなければなりません.
1つのCSS 3の属性に加えて、関連する要素のイベントリスニングが無効になり、要素を「見える、点かない」にすることに等しい.IEは11までサポートを開始し、他のブラウザの現在のバージョンは基本的にサポートされています.詳しくはこちらをご覧ください.https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none; 23.Zepto点透の解決策zeptoのtapはdocumentにバインドされたtouchイベントを兼ねて聴くことでtapイベントのシミュレーションを完了し、tapイベントはdocumentにバブルをかけてトリガーされ、クリック完了時のtapイベント(touchstarttouchend)はdocumentにバブルをかける必要があり、documentにバブルをかける前にユーザーの手の接触スクリーン(touchstart)と画面を離れる(touchend)はclickイベントをトリガーする.clickイベントには遅延トリガ(これがなぜ移動端がclickを使わずtapを使うのか)(およそ300 msでsafariのダブルクリックイベントを実現するための設計)があるため、tapイベントを実行した後、弾き出された選択コンポーネントはすぐに隠され、このときclickイベントは遅延の300 msの中にあり、300 msが到来するとclickが到着するのは実は完成ではなく隠蔽後の下の要素であり、真下の要素がバインドされているclickイベントがトリガーされ、clickイベントがバインドされていない場合はclickがないとしますが、真下にあるのはinput入力ボックス(またはselect選択ボックスまたはラジオチェックボックス)で、デフォルトフォーカスをクリックして入力キーボードをポップアップすると、上の点透現象が発生します.
fastclickを導入する.jsは、ページに次のjsコードを追加します.
1 window.addEventListener( “load”, function() { 2 FastClick.attach( document.body ); 3 }, false ); あるいはzeptoやjQueryのjsに加えて
1 $(function() { 2 FastClick.attach(document.body); 3 }); もちろんrequireならこうです.
1 var FastClick = require(‘fastclick’); 2 FastClick.attach(document.body, options); シナリオ2:tapイベントの代わりにtouchendを使用し、touchendのデフォルト動作preventDefault()をブロック
1 $("#cbFinish").on("touchend",function(event){2//多くの処理例えば何かを隠す3 event.preventDefault();4});シナリオ3:イベントを処理するために一定の時間(300 ms+)遅延する
1 $("#cbFinish").on(「tap」,function(event){2 settimeout(function(){3//隠しなどの処理が多い4},320);5 });
1、外観A、ページ高さレンダリングエラー
document.documentElement.style.height = window.innerHeight + ‘px’; B、重ね合わせハイライト
-webkit-tap-highlight-color:rgba(0,0,0,0); 2、行為A、イベントをトリガーできない
var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false); 3、アプリケーションA、ブラウザクラッシュ
var act = function(){ window.removeEventListener(‘devicemotion’,act); }; window.addEventListener(‘devicemotion’,act,false); 解縛関数がイベント処理に書かれて小米携帯電話の微信が崩壊した場合、解縛時間をイベント処理に書かないでください.
//play and pause it once
document.addEventListener(‘touchstart’, function () {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
}); C、同時にマルチオーディオを再生できない
4、システム/ハードウェアA、変な浮遊フォーム
var oHeight = $(document).height();//ブラウザの現在の高さKaTeX parse error:Expected'}',got'EOF'at end of input:...function(){if((document).height()
5.Android携帯電話にメールボックスを認識させない6.iOSが長い数字を電話7と認識することを禁止する.iOSの各種操作ウィンドウのイジェクトを禁止する-webkit-touch-callout:none 8.transitionフラッシュの削除-webkit-transform-style:preserve-3 d;/*埋め込まれた要素を3 D空間でどのように表示するかを設定します:3 D*/-webkit-backface-visibility:hidden;/*(変換する要素の背面がユーザーに対して表示されるかどうかを設定:非表示)*/9.iOSシステムの中国語入力方式で英語を入力すると、アルファベットの間に6分の1のスペースが表示される可能性があります.value = this.value.replace(/\u2006/g, '');
10.iosおよびandroidユーザーのテキスト選択を禁止-webkit-user-select:none 11.iosとandriodではaudio要素とvideo要素が自動的に再生できない対応策:タッチスクリーンで放送
$(‘html’).one(‘touchstart’,function(){ audio.play() }) 12.iosの下でinputの入力時の英語の頭文字のデフォルトの大文字13をキャンセルします.androidで音声ボタンの入力をキャンセルinput::-webkit-input-speech-button{display:none}14 CSSアニメーションページフラッシュ、アニメーションカートン
解決方法:1.合成属性transformおよびopacityを使用するCSS 3のアニメーションを可能な限り設計し、positionのleftおよびtopを使用する位置決め2を使用しない.ハードウェアアクセラレータ-webkit-transform:translate 3 d(0,0,0);moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
16.fixed位置決め欠陥ios下fixed要素の位置決めエラーが発生しやすい.ソフトキーボードがイジェクトされた場合、fixed要素の位置決めに影響するandroid下fixedの表現はiOSよりもよく、ソフトキーボードがイジェクトされた場合、fixed要素の位置決めに影響しないios 4下で解決策をサポートしない:iScrollプラグインでこの問題を解決することができる17.スクリーンの回転を阻止するフォントサイズhtml,body,form,fieldset,p,div,h 1,h 2,h 3,h 4,h 5,h 6{-webkit-text-size-adjust:none;}18 Inputのplaceholderでテキスト位置が上になる場合inputのplaceholderでテキスト位置が上になる場合:PC側でline-heightを設定するとheightが位置合わせできるのに等しく、移動側は上になるので、line-height:normalを設定することになります
19往復キャッシュの問題ブラウザのロールバックをクリックすると、jsが自動的に実行されない場合があります.特にmobilesafariでは.これは往復キャッシュ(bfcache)と関係がある.
解決方法:window.function(){}; 20.calcの互換性処理CSS 3のcalc変数はiOS 6ブラウザに-webkit-接頭辞を付けなければならない.現在のFFブラウザには-moz-接頭辞は必要ない.Androidブラウザは現在もcalcをサポートしていないので、以前に保守的なサイズを追加します.
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } 21 iOS 6の擬似クラス:hover以外の要素は無効です.Androidでは有効です.に似ている
div#topFloatBar_l:hover #topFloatBar_menu { display:block; } このようなナビゲーション表示はiOS 6でクリックしてもクリック効果はなく,クリックリスナーを増やして要素にclassを増減させることでサブ要素を制御するしかない.
22移動端で見苦しいクリックのハイライト効果を修正し、iOSとアンドロイドの下で有効です.
1つのCSS 3の属性に加えて、関連する要素のイベントリスニングが無効になり、要素を「見える、点かない」にすることに等しい.IEは11までサポートを開始し、他のブラウザの現在のバージョンは基本的にサポートされています.詳しくはこちらをご覧ください.https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: none; 23.Zepto点透の解決策zeptoのtapはdocumentにバインドされたtouchイベントを兼ねて聴くことでtapイベントのシミュレーションを完了し、tapイベントはdocumentにバブルをかけてトリガーされ、クリック完了時のtapイベント(touchstarttouchend)はdocumentにバブルをかける必要があり、documentにバブルをかける前にユーザーの手の接触スクリーン(touchstart)と画面を離れる(touchend)はclickイベントをトリガーする.clickイベントには遅延トリガ(これがなぜ移動端がclickを使わずtapを使うのか)(およそ300 msでsafariのダブルクリックイベントを実現するための設計)があるため、tapイベントを実行した後、弾き出された選択コンポーネントはすぐに隠され、このときclickイベントは遅延の300 msの中にあり、300 msが到来するとclickが到着するのは実は完成ではなく隠蔽後の下の要素であり、真下の要素がバインドされているclickイベントがトリガーされ、clickイベントがバインドされていない場合はclickがないとしますが、真下にあるのはinput入力ボックス(またはselect選択ボックスまたはラジオチェックボックス)で、デフォルトフォーカスをクリックして入力キーボードをポップアップすると、上の点透現象が発生します.
fastclickを導入する.jsは、ページに次のjsコードを追加します.
1 window.addEventListener( “load”, function() { 2 FastClick.attach( document.body ); 3 }, false ); あるいはzeptoやjQueryのjsに加えて
1 $(function() { 2 FastClick.attach(document.body); 3 }); もちろんrequireならこうです.
1 var FastClick = require(‘fastclick’); 2 FastClick.attach(document.body, options); シナリオ2:tapイベントの代わりにtouchendを使用し、touchendのデフォルト動作preventDefault()をブロック
1 $("#cbFinish").on("touchend",function(event){2//多くの処理例えば何かを隠す3 event.preventDefault();4});シナリオ3:イベントを処理するために一定の時間(300 ms+)遅延する
1 $("#cbFinish").on(「tap」,function(event){2 settimeout(function(){3//隠しなどの処理が多い4},320);5 });
1、外観A、ページ高さレンダリングエラー
100% ， ， ， javascript ：
document.documentElement.style.height = window.innerHeight + ‘px’; B、重ね合わせハイライト
android ， ， CSS ：
-webkit-tap-highlight-color:rgba(0,0,0,0); 2、行為A、イベントをトリガーできない
android 、 ， ：-webkit-transform: translate3d(0,0,0) ， 。
B、:active
android 4.0 CSS :active ， touch （touchstart/touchend/touchmove） :
var element=document.getElementsById(”btnShare”); element.addEventListener(‘touchstart’,function(){},false); 3、アプリケーションA、ブラウザクラッシュ
var act = function(){ window.removeEventListener(‘devicemotion’,act); }; window.addEventListener(‘devicemotion’,act,false); 解縛関数がイベント処理に書かれて小米携帯電話の微信が崩壊した場合、解縛時間をイベント処理に書かないでください.
B、 、
， 、 、 （webview）、 ， ， ， :
//play and pause it once
document.addEventListener(‘touchstart’, function () {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
}); C、同時にマルチオーディオを再生できない
android , ， , ， android ， 。
D、
android 4.0 body(html) overflow:scroll ， :
1、 body(html) ， “ ”。
2、 iscroll、 js translate、scrollTop
4、システム/ハードウェアA、変な浮遊フォーム
android ， input:password ， input:text -webkit-text-security: disc; 。
B、
， ， overflow:hidden ， ， ！
C、
webview android ， 。 target="_blank"' ， IOS android 。
D、Flex box
webview Flex box ， ， Flex box ， ， ， 3 Flex box 。 。