解決安卓的input的彈出的軟鍵盤遮住文本

ios的軟鍵盤彈出會把整個文本區域抵上來，可是安卓會覆蓋部分的文本，很不友好的 
先上效果圖： 
安卓： 

實現的方法就是display：flex的實現，若是有表單，千萬不要使用的position的方法，這樣安卓確定會掛掉。

形式一：外部一個container 裏面有個content，可是content是絕對居中的，第一反應是position，可是有表單的話，就要放棄這種方法。

注：有表單就該使用 flex的方法

.container { display: flex; align-items: center; justify-content: center; } .content { width:100px; height:100px; }

形式二：

<article id="h5applyvip"> <header class="header"></header> <div class="content"> <form class="form"> <input type="text" class="input" name="name" v-model.trim = "formData.name"> <input type="text" class="input" name="name" v-model.trim = "formData.name" > <input type="text" class="input" name="name" v-model.trim = "formData.name" > <input type="text" class="input" name="name" v-model.trim = "formData.name" > </form> </div> <footer class="footer" @click="openClick(formData)"> <!--當即開通--> <img src="./images/open-btn@2x.png" alt="" class="open-btn"> </footer> </article>

#h5applyvip { width: 100%; min-height: 100vh; //撐滿整個屏幕 display: flex; flex-direction: column; //豎向排列 .header { width: 7.5rem; height: 3.1rem; //頭部的定死高度 } .content { flex: 1; //content是撐滿 width: 100%; } .footer { height: 1.1rem; //腳部的定死高度 width:100%; } }

上面的這種方法 能夠實現另一中的效果 （sticky footer）

參考資料： 
http://caniuse.com/#search=flex-direction」 
http://www.runoob.com/w3cnote/flex-grammar.html