H5インライン開発互換性の問題

ウェブビューがNavBarを提供する場合、得られる一番上の安全領域はデバイスの安全領域＋NavBarの高さです。

タブバーがある場合、下部の安全領域はデバイスの安全領域＋タブバーの高さで求められます。

注目してください：

webViewを使用して単一ページのアプリケーションをロードする場合、ルート切り替え時にNavBarやTabBarの表示/非表示を切り替える必要がある場合は、セーフエリアの変更に注意する必要があります。

• AndroidはjsBridgeを通してセーフエリアの上下左右を取得します。

  const density = window.innerWidth / window.screen.width; // 密度；IphoneXは2
  document.body.style.paddingTop = `${density * 44}px`; 
  document.body.style.paddingTop = `calc(${density}*constant(safe-area-inset-top))`; 
  document.body.style.paddingTop = `calc(${density}*env(safe-area-inset-top))`; /* 下部の小さな黒いバーを適応する*/ 
  document.body.style.paddingBottom = 0; 
  document.body.style.paddingBottom = `calc(${density}*constant(safe-area-inset-bottom))`; 
  document.body.style.paddingBottom = `calc(${density}*env(safe-area-inset-bottom))`;
  

検索ボックスに対応するキーボードテキスト

• Android

  <input type="search" />

• アイオーエス

  getSafeArea().then((result) => { // セーフエリアの高さを取得する
   const { top, bottom, left, right } = result; 
   const isAndroid = new RegExp('\\bAndroid|\\bAdr', 'i').test(window.navigator.userAgent); 
   document.body.style.boxSizing = 'border-box'; 
   if (isAndroid) { 
   document.body.style.paddingTop = `${top / window.devicePixelRatio}px`; 
   document.body.style.paddingBottom = `${bottom / window.devicePixelRatio}px`; 
   document.body.style.paddingLeft = `${left / window.devicePixelRatio}px`; 
   document.body.style.paddingRight = `${right / window.devicePixelRatio}px`; 
   }
  })
  

戻るボタン

• アンドリド

  history.goBack(); // Androidの戻るボタンと一致

• IOS

カスタムルーティング

<form action="">
 <input type="search" />
</form>

カスタムリターン・メソッド

// ルート変更を聞く
const history = createHashHistory();
history.listen((location) => { 
 const { state: { type } = {} } = location; 
 let historyList = JSON.parse(localStorage.getItem('history')); 
 if (!historyList || historyList.length === 0) { 
 historyList = ['/']; 
 } 
 if (`${historyList[historyList.length - 1]}` !== location.pathname) { 
 if (type === 'replace') { 
 return; 
 } 
 localStorage.setItem('history', JSON.stringify(historyList.concat(location.pathname))); 
 }
});

写真の見せ方の問題

AndoridとIOSのウェブビューでimgタグの表示にスタイルの互換性の問題があります。統一するためには、imgタグに特定の幅と高さの値を設定する必要があります。

• Android

ラベルに属性がない場合、デフォルトではwidth:autoに従って表示され、イメージのサイズが画面の範囲外になると異常表示されます。

解決策

img 要素のサイズは、Android ウェブビューで設定する必要があります。

• IOS