ios 內嵌h5頁面 閃屏問題

在h5做webview，遇到一些問題，如果有遇到同樣的問題的小伙伴，歡迎留言交流

1. 閃屏問題

在ios app點擊進入h5頁面的時候，會出現閃屏問題

• 首先ios工程師做了加載前的處理，完美的解決了一種閃屏問題；

• 但是，iphone7、8還出現了閃白屏問題，經過多個頁面對比發現，是布局中body有背景圖片導致的個別手機閃屏，處理辦法就是，將圖片加載完畢后顯示，這樣沒有很嚴重的閃屏問題，圖片會延遲1s出現；

var img = new Image();
img.src = "./images/[e-mail]";
img.onload = function () {
    $('body').css("background-image","url(./images/[e-mail])")
}

• 在移動端IOS，點擊屏幕會出現閃屏的效果，如何去除閃屏，網上有說需要設置

html, body {  
  -webkit-tap-highlight-color:rgba(0,0,0,0); 
}

上面方式都處理后，發現iphone7 比較嚴重，首次進入會白屏，偶爾會閃白，頁面已經處理的很簡單了，我的頁面是外鏈形式的，不知道服務端渲染會不會好些

2. 布局

在布局上ios 內嵌的h5頁面，下拉會滑動回彈，這樣回彈會顯示原本app提供的背景色/圖片，設計的時候要考慮這塊的協調性；

整體頁面不是純色，例如在設計上內容部分和body的顏色不同，為了美觀設計這樣設計的，問題是，iphoneX app 中會自動把底部安全距離保留出來，這樣，底部內容的顏色就不能平鋪到底部的安全距離，下拉到底會出現分格色；

針對不同UI，移動端上，滾動部分最好是默認的body，如果是content，會出現觸摸失焦滾動不動的現象！