我們公司有一個頁面底部用到了fixed樣式，每當彈出鍵盤的時候，IOS下fixed就會走樣(據我所知android沒有該問題)。
為此之前我經過產品的同意做了簡單的處理（方法1）。
方法一：
focus的時候讓fixed塊position變為relative，這是最簡單的處理方法。
下面是我的小demo
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" /> <style> * { padding: 0; margin: 0; } .input { margin:10px 10px 400px 10px; width: 200px; height: 30px; border: 1px solid #ccc; display: block; } .next { width: 100%; height: 44px; line-height: 44px; background: orangered; position: fixed; bottom:0; color:#fff; text-align: center; } .pos-rel { position: relative;; } </style> <script src="../js/zepto.js"></script></head><body><section class="content"> <input class="input" type="text" /> <input class="input" type="text" /> <input class="input" type="text" /> <div class="next"> 下一步 </div></section><script> $(function() { var isIOS = (/iphoneipad/gi).test(navigator.appVersion); if (isIOS) { $(".content").on("focus", "input", function () { $(".next").addClass("pos-rel"); }).on("focusout", "input", function () { $(".next").removeClass("pos-rel"); }); } });</script></body></html>
方法二：
position：absolute；每次滾動的時候重新算位置。
下面是我的小demo，touch的時候作了隱藏處理，input focusout和window resize的時候作了fixed位置重新計算。
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" /> <style> * { padding: 0; margin: 0; } .input { margin:10px 10px 400px 10px; width: 200px; height: 30px; border: 1px solid #ccc; display: block; } .next { width: 100%; height: 44px; line-height: 44px; background: orangered; position: absolute; color:#fff; text-align: center; } .pos-rel { position: relative;; } </style> <script src="../js/zepto.js"></script></head><body> <input class="input" type="text" /> <input class="input" type="text" /> <input class="input" type="text" /> <div class="next"> 下一步 </div></body><script> var isIOS = (/iphoneipad/gi).test(navigator.appVersion); var likeFixed = function() { //解除綁定resize事件 以免進入死迴圈 $(window).unbind("resize", likeFixed); var t = document.documentElement.scrollTop document.body.scrollTop, fixed_height = 44, top; //網頁可見高度加上捲軸高度 - fixed元素的高度 top = window.innerHeight+ t - fixed_height; //設定fixed div的top $(".next").css({"top": top+"px" }); //重新綁定resize事件 setTimeout(function() { $(window).bind("resize", likeFixed); }, 10); } $(function() { if (isIOS) { likeFixed(); function touchstart(event) { $(".next").css("opacity",0); } function touchend(event) { $(".next").css("opacity",1); } //touch的時候隱藏 document.addEventListener("touchstart", touchstart, false); //滾動後重新設定fixed div的位置 window.onscroll = likeFixed; //touch後顯示 document.addEventListener("touchend", touchend, false); } //所有input blur時重新計算位置，相容chrome $("body").on("focusout", "input", likeFixed); });</script></html>
以上是我的處理方法，也許存在不足之處，歡迎大家提出寶貴意見，一起交流。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
