ios不支援fixed解決解決方案

admin發表於2017-02-23
iOS

ios不支援fixed， 特別是當頁面中有input ，當這個input獲取焦點的時候，問題特別明顯。

這個問題也稱之為 “ input focus ios fixed無效”。

a:3:{s:3:\"pic\";s:43:\"portal/201702/23/222809xr58n1tyl5tletpe.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果頁面是標準的，這系統（瀏覽器）解析差異造成的bug的話，勢必要通過js來處理，勢必就削弱了網頁的效能，所以這個問題 並不影響網頁的功能，也不是錯位等嚴重問題，在二選一當中， 個人建議是妥協。

下面比較簡單的程式碼可以解決部分問題，但是不徹底，歡迎提出指正:

[JavaScript] 純文字檢視 複製程式碼
//ios不支援fixed解決方案
var u = navigator.userAgent,
  app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
  $('textarea,input[type=text]').focus(function() {
    window.setTimeout('scrollBottom()', 500);
  });
}
 
function scrollBottom() {
  window.scrollTo(0, $('body').height());
}

另外附一個純css解決方案，比js要簡單很多，效果有待進一步證實，純css方法也試過，感覺沒用，歡迎指正。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>螞蟻部落</title>
<style>
.head,.foot{
  position:fixed;
  left:0;
  height:38px;
  line-height:38px;
  width:100%;
  background-color:#99CC00;
}
.head{top:0;}
.foot{bottom:0;}
.main{
  position:fixed;
  top:38px;
  bottom:38px;
  width:100%;
  overflow:scroll;
  background-color:#BABABA;
}
</style>
</head>
<body>
<header class="head">頂部固定區域</header>
<article class="main"  id="wrapper">  
  <div>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <p>當內容欲出隱藏時，灰色區域可上下拖動</p>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    <input type="text" value="" class="inputtext"> <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
    content <br>
  </div>
</article>
<footer class="foot">底部固定區域</footer>
</body>
</html>

相關文章