近期做了一些移動端的事兒，本來順順利利的提了測，感覺沒什么問題，不過測試同學一會反映一個ios safari的問題過來（留下了貧窮的淚水）,在這里記錄一下，大家遇到的時候也可有應對措施。
1、vh單位問題
在我們的代碼中，可能會用到vh來作為寬度單位，如果用到了，可能你這就要小心。
比如我們想實現下圖這樣的場景：
最簡單的思路其實就是一個flex布局，然后頭部和底部一定寬度，內容區flex：1即可，但是，如果你給body使用了100vh來定義范圍，那么，你將在IOS下看到：
問題來了，我的footer跑哪里去了，仔細看看，你會在safari底部的操作區中看到一點點淺藍，像是被操作區擋住了的東西，那就是你的footer
原因：這并不是一個bug,而是webkit為了保障IOS 60FPS的方案（算是一個功能吧），具體見 https://bugs.webkit.org/show_bug.cgi?id=141832
解決對策：
1、放棄100vh吧，用100%。
2、放棄100vh吧，使用 -webkit-fill-available [該值作用是盡可能的撐滿可用空間]
如下：
html {
height:-webkit-fill-available;
}
body {
height: 100vh;
height: -webkit-fill-available;
}
2、meta viewport失效的問題
在移動端，我們可能會寫這樣的標簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
用于確定視窗大小，同時禁止用戶手動放大縮小，但是，從IOS 10開始，他就不在支持利用user-scalable禁止用戶雙指放大，縮小。
原因：相關說明見https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/，我截取了重要的部分見下圖。
簡而言之就是，決定內容文本的大小，是用戶已有的權利，我們不應該組織，我們應該自己意識到這點，并且在放大縮小的時候能保證頁面內容正常。
解決對策： 取消多指事件 **gesturestart**默認行為，該事件為IOS獨有，詳見https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
3、safari滾動阻尼問題
在safari下，為了讓用戶滾動更流暢，我們經?？梢赃^量滾動，然后觸發一定的回彈效果。像這個視頻一樣
看起來很舒服，很符合用戶操作對不對，可是一但出現額外的滾動區域的話，就會產生奇怪的問題,比如你想滾動一個iframe的滾動條，然后發現滾動到body下的滾動，觸發了回彈效果。
解決對策：
1、取消掉body的滾動，僅在支持滾動區域的地方加入滾動效果
html, body {
height: 100%;
overflow: hidden;
}
.scroll-wrap{
overflow:auto
}
**該方法缺陷是好處不會全局產生回彈阻尼效果了，但是對應的滾動元素體依然會這樣**
**2、使用iNoBounce庫[https://github.com/lazd/iNoBounce](https://github.com/lazd/iNoBounce)，然后在對應想取消掉回彈的元素上增加 overflow, height, -webkit-overflow-scrolling屬性即可**
```html
.scroll-wrap{
overflow:auto;
-webkit-overflow-scrolling: touch;
height:100px;
}
其原理也比較簡單，主要是對touchstart和touchmove事件進行監聽，然后隨時計算滾動條位置，如果到底了，取消掉事件的默認行為。
