App埋め込みwebviewピット

モバイル側h 5ページで発生した問題を記録する
一、スタイル部分

1.1基本様式

 object-fit:fill; //video     
 -webkit-appearance:none; //  iOS       

1.2劉海屏安全区域

iPhone X以降のバージョンでは、劉海屏と下部が完全な四角形ではないため、ページ表示が異常になった.処理方式は,ページが前髪スクリーンと底部の領域を外に排除して中間部分,すなわちいわゆる安全領域を用いる.
iPhone Xが提供するmetaヘッド

 //             
 //        
 //    contain  

前髪スクリーンに合わせるにはcoverのモードを使用する必要があります
セキュリティ領域には4つの値が含まれています

safe-area-inset-left //            
safe-area-inset-righ //            
safe-area-inset-top //            
safe-area-inset-bottom //            

左右の距離は一般的に0であり、ページの横画面がcssで組み合わせて使用される2つの関数であるべきである:envとconstant;envはiOS>=11.2でサポートされる必要があります.constantはiOS<11.2のバージョンで使用されます.たとえば、ヘッダーnavbarがposition:fixedを使用している場合は、次のように書き換える必要があります.

.navbar{
    top:0;
    top:constant(safe-area-inset-top);
    top:env(safe-area-inset-top);/*           */
}

私の処理方法はposition:relativeを使ってマージンを減らして、内部の内容の領域はposition:absolute 関連リンク:h 5フルスクリーンiphonexでの適合を使います
二、インタラクティブ部分

2.1 Appはh 5通信

へと通信する.
メソッドをwindowの下に定義します.つまり、グローバルに定義すればいいです.

2.2 h 5 App通信

iOS: window.webkit.MessageHandlers[プロジェクト名のような約定の名称]postMessage(パラメータ)Android:window約定の名称、例えばプロジェクト名(パラメータ)

2.3 h 5ページアクティブまたは非表示状態切り替え

これはブラウザが本来サポートする方法であり、リスニング状態によって変化し、具体的な例は以下の通りである.

const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
document.addEventListener('visibilitychange', () => {
  if (document[hiddenProperty]) {
    //   H5    app      ,      
    // Toast('     ');

  } else {
    //              ,  H5   ,      
    // Toast('     ');
  }
});

三、互換性処理

3.1アンドロイドアップロード画像

安卓端のwebviewは、を使用して画像異常をアップロードし、画像を選択するとページに戻ることができません.解決方法は原生処理であり、以下のリンクである.(処理後、アンドロイドはh 5を使用して写真をアップロードするとアルバムの写真を使用し、写真を撮るオプションはありません.ここでは使用に影響しませんが、さらに最適化できるかもしれません)関連リンク:Android WebViewはH 5 input type=「file」解決方法をサポートしていません

3.2ページ要素表示位置と実位置に誤差がある

シーン:弾枠の入力枠がフォーカスすると携帯電話のソフトキーボードがポップアップされ、キーボードを閉じると弾枠のボタンが表示されたり、閉じたりしてクリックできません.
何が問題なのかと勘違いして「カード」が詰まっていたが、後で観察してみると、ページがスライドしていることが分かった.ソフトキーボードがイジェクトされると、webviewの可視領域を上にスクロールしますが、ソフトキーボードが閉じると位置が復元されずページがずれ、scrollYを傍受すると変化が見られます.「カード」が発生した原因は位置が変わったことであり、ここでは玄学的なのは実際の位置が変わったのに、ボタンが正常な位置に表示されていることであり、位置決めの問題が発生していない原因にもなっている.
解決策:入力ボックスのフォーカスフォーカスフォーカスを傍受することで、フォーカスが発生した場合(フォーカスが発生した場合、ちょうどソフトキーボードも閉じた)window.scrollTo(0,0)を使用してページを正常な位置に戻す
四、その他のまとめ
フロントエンドプロジェクトはVueフレームワークを使用しているため、ここではエンドページUIライブラリを移動し、mint-uiと比較してVantを選択した.