解決移動端兩端佈局的input+fixed的bug

admin發表於2017-02-23

在移動端佈局中，會經常出現固定在手機上下兩端的頁面。

但是fixed定位和軟鍵盤碰上之後，會碰到各種的坑，ios和android上都會遇到。

下面就分享一下如何解決此問題，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>螞蟻部落</title>
</head>
<body>
  <div class="main">
    <p>可以用手機看看</p>
    <p>test</p>
    <p>軟鍵盤出來後</p>
    <p>test</p>
    <p>foot是否會錯位~</p>
    <p>test</p>
    <p>test</p>
    <input type="text" placeholder="我是一個輸入框">
    <input type="text" placeholder="用手機點我啊">
  </div>
  <div class="foot">
    copyright by linyang
  </div>
</body>
</html>

相關文章