問題：移動端前端底部導航欄設計 兼容安卓下的各種瀏覽器和IOS自帶的Safari,但是不兼容蘋果下的 釘釘。
具體代碼格式：
<body> <!-- 頭部導航欄 --> <div class="header">內容</div> <!-- 內容 --> <div class="content">內容</div> <!-- 底部導航欄 --> <div class="footer">內容</div> </body>
css樣式:
body{padding-bottom:20px;height: 100%;}
.header{
position: relative;
width:100%;
height: 45px;
background: #38adff;
}
.content{
width:100%;
height: 100%;
}
.footer{
position:fixed;
width:100%;
left:0px;
z-index:105;
bottom:0px;
}
這樣寫下來，在安卓的一系列瀏覽器和釘釘上面是正常的 。在IOS的一系列瀏覽器上是正常的，但是在釘釘上面，拖動的時候會導致底部導航欄也跟着拖動。這個問題困擾了我好幾天，明明只是個小BUG！
在網上找了很多資料，比如動態的改變底部導航欄的top值：
<script type="text/javascript">
$(window).scroll(function(){
// 重點就是下面這一條語句的實現
$("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });
});
</script>
這樣寫，確實有效果，但是在IOS下面會出現底部導航欄閃現閃出的效果，這樣寫用戶體驗性也會不好，所以排除了。
后來換種思路，body不可拖動，只拖動內容部分，底部導航欄不可拖動，改了一下content的樣式
.content{
position: absolute; //絕定位
top:0px;
width:100%;
overflow:auto;
height: 100%;
overflow-y: scroll; //縱向滑動
-webkit-overflow-scrolling: touch; //實現快速滾動和回彈的效果
padding-bottom:60px;
}
這樣寫在IOS下的釘釘初步可以了，但是只要蘋果自帶的上拉工具框出現就會導致底部導航欄再次跟着拖動。所以這個問題並未真正意義上的解決。
PS：釘釘自己的內核環境是chorme，但是我在蘋果上的chorme上運行是正常的。搞不懂釘釘。
百度了一下IScroll.js可以解決IOS上面的fixed不適配問題，目前還沒嘗試，准備試一下。
作者：Aylson.Fu
出處：https://www.cnblogs.com/formybestlife/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。非常感謝~