近期做了一些移動端的事兒赋朦，本來順順利利的提了測，感覺沒什么問題绷杜，不過測試同學(xué)一會反映一個ios safari的問題過來（留下了貧窮的淚水）,在這里記錄一下甩十，大家遇到的時候也可有應(yīng)對措施。
1坪郭、vh單位問題
在我們的代碼中，可能會用到vh來作為寬度單位脉幢，如果用到了歪沃，可能你這就要小心。
比如我們想實現(xiàn)下圖這樣的場景：
最簡單的思路其實就是一個flex布局嫌松，然后頭部和底部一定寬度沪曙，內(nèi)容區(qū)flex：1即可，但是萎羔，如果你給body使用了100vh來定義范圍液走，那么，你將在IOS下看到：
問題來了贾陷，我的footer跑哪里去了缘眶，仔細(xì)看看，你會在safari底部的操作區(qū)中看到一點點淺藍(lán)髓废，像是被操作區(qū)擋住了的東西巷懈，那就是你的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失效的問題
在移動端频伤，我們可能會寫這樣的標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
用于確定視窗大小恳谎，同時禁止用戶手動放大縮小剂买，但是惠爽，從IOS 10開始，他就不在支持利用user-scalable禁止用戶雙指放大婚肆，縮小。
原因：相關(guān)說明見https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/较性，我截取了重要的部分見下圖用僧。
簡而言之就是，決定內(nèi)容文本的大小赞咙，是用戶已有的權(quán)利，我們不應(yīng)該組織攀操，我們應(yīng)該自己意識到這點院仿，并且在放大縮小的時候能保證頁面內(nèi)容正常速和。
解決對策： 取消多指事件 **gesturestart**默認(rèn)行為歹垫，該事件為IOS獨有，詳見https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
3颠放、safari滾動阻尼問題
在safari下排惨，為了讓用戶滾動更流暢，我們經(jīng)撑鲂祝可以過量滾動誓沸，然后觸發(fā)一定的回彈效果留攒。像這個視頻一樣
看起來很舒服慢洋，很符合用戶操作對不對伸头，可是一但出現(xiàn)額外的滾動區(qū)域的話，就會產(chǎn)生奇怪的問題,比如你想滾動一個iframe的滾動條恤磷，然后發(fā)現(xiàn)滾動到body下的滾動，觸發(fā)了回彈效果扫步。
解決對策：
1、取消掉body的滾動河胎，僅在支持滾動區(qū)域的地方加入滾動效果
html, body {
height: 100%;
overflow: hidden;
}
.scroll-wrap{
overflow:auto
}
**該方法缺陷是好處不會全局產(chǎn)生回彈阻尼效果了闯袒，但是對應(yīng)的滾動元素體依然會這樣**
**2、使用iNoBounce庫[https://github.com/lazd/iNoBounce](https://github.com/lazd/iNoBounce)政敢，然后在對應(yīng)想取消掉回彈的元素上增加 overflow, height, -webkit-overflow-scrolling屬性即可**
```html
.scroll-wrap{
overflow:auto;
-webkit-overflow-scrolling: touch;
height:100px;
}
其原理也比較簡單，主要是對touchstart和touchmove事件進行監(jiān)聽喷户，然后隨時計算滾動條位置，如果到底了褪尝，取消掉事件的默認(rèn)行為。
