關於移動端輸入鍵盤遮擋頁面

標籤：鍵盤遮擋   底部   技術分享   src   col   html   改變   就是   radius   

 問題顯示：

當吊起手機的軟鍵盤的時候 會遮住驗證碼輸入內容，造成盲輸入

 

問題解決：

 

在包裹 登入的父元素樣式上加:

.login{position: fixed;background-color: #fff;width: 600px;box-sizing: border-box;border-radius: 50px;margin: 0 auto;transform: translatey(50%);padding: 40px 70px;left: 50%;margin-left: -300px;bottom: 50%;}

　　重點就是bottom：50% （在希望登入框置中的情況下）

我們可以發現 ，當頁面吊起移動端的軟鍵盤的時候 頁面的高度發生了改變，使用fixed布局，檢測到了改變 並作出了相應的變化，從底部定位 可以確保鍵盤出現的時候，頁面的內容可以正常顯示出來。

關於移動端輸入鍵盤遮擋頁面