目錄
一.iOS 滑動不流暢
表現
上下滑動頁面會產生卡頓，手指離開頁面，頁面立即停止運動。整體表現就是滑動不流暢，沒有滑動慣性。
產生原因
爲什麼 iOS 的 webview 中 滑動不流暢，它是如何定義的？
iOS 5.0 以及之後的版本，滑動有定義有兩個值 auto 和 touch，默認值爲 auto；
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 */
-webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開，滾動會立即停止 *
解決方案
1.在滾動容器上增加滾動 touch 方法，也就是最外層的滾動 大到body 小到對應的盒子元素
將-webkit-overflow-scrolling 值設置爲 touch
.wrapper {
-webkit-overflow-scrolling: touch;
}
設置滾動條隱藏：
.container ::-webkit-scrollbar {display: none;}
可能會導致使用position:fixed; 固定定位的元素，隨着頁面一起滾動
2.設置 overflow
設置外部 overflow 爲 hidden,設置內容元素 overflow 爲 auto。內部元素超出 body 即產生滾動，超出的部分 body 隱藏。
body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}
所以最終的方案就是通過 最外層的盒子overflow隱藏多餘的，並添加
-webkit-overflow-scrolling爲滑動，內容auto 滾動起來來實現效果
二.iOS 上拉邊界下拉出現白色空白
表現
手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。
產生原因
在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。
解決方案
1. 監聽事件禁止滑動,在對應的元素上添加禁止事件，一般默認都是加在body上
document.body.addEventListener('touchmove', function(e) {
if(e._isScroller) return;
// 阻止默認事件
e.preventDefault();
}, {
passive: false
});
三.頁面放大或縮小不確定性行爲
表現
雙擊或者雙指張開手指頁面元素，頁面會放大或縮小。
產生原因
HTML 本身會產生放大或縮小的行爲，比如在 PC 瀏覽器上，可以自由控制頁面的放大縮小。但是在移動端，我們是不需要這個行爲的。所以，我們需要禁止該不確定性行爲，來提升用戶體驗。
原理與解決方案
HTML meta 元標籤標準中有個 中 viewport 屬性，用來控制頁面的縮放，一般用於移動端
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 -->
還有其他參數來限制用戶的行爲
四.在PC端可以的字體放在手機端就不行
表現
按照設計圖設置字體當在手機端顯示過大
產生原因
HTML 本身的解析是瀏覽器，默認的解析都是根據網頁來解析的，
原理與解決方案
HTML meta 元標籤標準中有個 中 viewport 屬性，用來控制頁面的縮放，一般用於移動端，優化瀏覽器的顯示，讓他在手機端的時候也是顯示對應的
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">
<!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 -->
五.軟鍵盤將頁面頂起來、收起未回落問題
表現
Android 手機中，點擊 input 框時，鍵盤彈出，將頁面頂起來，導致頁面樣式錯亂。
移開焦點時，鍵盤收起，鍵盤區域空白，未回落。
產生原因
我們在app 佈局中會有個固定的底部。安卓一些版本中，輸入彈窗出來，會將解壓 absolute 和 fixed 定位的元素。導致可視區域變小，佈局錯亂。
原理與解決方案
軟鍵盤將頁面頂起來的解決方案，主要是通過監聽頁面高度變化，強制恢復成彈出前的高度。
// 記錄原有的視口高度
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;
window.onresize = function(){
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(resizeHeight < originalHeight ){
// 恢復內容區域高度
// const container = document.getElementById("container")
// 例如 container.style.height = originalHeight;
}
}
鍵盤不能回落問題出現在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 開發中是比較常見的 Bug。
兼容原理，1.判斷版本類型 2.更改滾動的可視區域
const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!isWechat) return;
const wechatVersion = wechatInfo[1];
const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
// 如果設備類型爲iOS 12+ 和wechat 6.7.4+，恢復成原來的視口
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}
六.iPhone X系列安全區域適配問題
表現
頭部劉海兩側區域或者底部區域，出現劉海遮擋文字，或者呈現黑底或白底空白區域。
產生原因
iPhone X 以及它以上的系列，都採用劉海屏設計和全面屏手勢。頭部、底部、側邊都需要做特殊處理。才能適配 iPhone X 的特殊情況。
解決方案
設置安全區域，填充危險區域，危險區域不做操作和內容展示。
危險區域指頭部不規則區域，底部橫條區域，左右觸發區域。
viewport-fit meta 標籤設置爲 cover，獲取所有區域填充。判斷設備是否屬於 iPhone X，給頭部底部增加適配層
viewport-fit有 3 個值分別爲：
auto：此值不影響初始佈局視圖端口，並且整個web頁面都是可查看的。
contain：視圖端口按比例縮放，以適合顯示內嵌的最大矩形。
cover：視圖端口被縮放以填充設備顯示。強烈建議使用safe area inset變量，以確保重要內容不會出現在顯示之外。
設置 viewport-fit 爲 cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">
增加適配層
使用 safe area inset 變量
/* 適配 iPhone X 頂部填充*/
@supports (top: env(safe-area-inset-top)){
body,
.header{
padding-top: constant(safe-area-inset-top, 40px);
padding-top: env(safe-area-inset-top, 40px);
padding-top: var(safe-area-inset-top, 40px);
}
}
/* 判斷iPhoneX 將 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
body,
.footer{
padding-bottom: constant(safe-area-inset-bottom, 20px);
padding-bottom: env(safe-area-inset-bottom, 20px);
padding-top: var(safe-area-inset-bottom, 20px);
}
}
safe-area-inset-top,safe-area-inset-right,safe-area-inset-bottom,safe-area-inset-leftsafe-area-inset-*由四個定義了視口邊緣內矩形的top,right,bottom和left的環境變量組成，這樣可以安全地放入內容，而不會有被非矩形的顯示切斷的風險。對於矩形視口，例如普通的筆記本電腦顯示器，其值等於零。對於非矩形顯示器（如圓形錶盤，iPhoneX屏幕），在用戶代理設置的四個值形成的矩形內，所有內容均可見。
其中 env() 用法爲 env( <custom-ident> , <declaration-value>? )，第一個參數爲自定義的區域，第二個爲備用值。
其中 var() 用法爲 var( <custom-property-name> , <declaration-value>? )，作用是在 env() 不生效的情況下，給出一個備用值。
constant（） 被 css 2017-2018 年爲草稿階段，是否已被標準化未知。而其他iOS 瀏覽器版本中是否有此函數未知，作爲兼容處理而添加進去。
詳情請查看文章末尾的參考資料。
兼容性
七.元素高亮問題
表現
iOS (iPhone和iPad)。當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景
原理與解決方案
重設這個表現，你可以設置-webkit-tap-highlight-color爲任何顏色。
想要禁用這個高亮，設置顏色的alpha值爲0
*{
/* 移動端可點擊元素去處默認邊框 */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
這個收錄APP的相關問題和操作，也會持續更新，有些是遇到找到，有些是自己解決的,後續的有遇到或者找到也會添加上去，歡迎大家提出和修正