資訊專欄INFORMATION COLUMN
摘要：最近用一種第三方開發(fā)框架開發(fā)，其中一個頁面有十幾個輸入框，在點擊輸入時，軟鍵盤彈起，導致頁面往上頂，底部的按鈕也全部彈到頁面上面去了，布局全被打亂。等輸入完，軟鍵盤收起時，頁面恢復原狀。
最近用 uniapp（一種第三方 app 開發(fā)框架） 開發(fā) app，其中一個頁面有十幾個 input 輸入框，在點擊 input 輸入時，軟鍵盤彈起，導致頁面往上頂，底部的按鈕也全部彈到頁面上面去了，布局全被打亂。
原來的樣子：
軟鍵盤彈出來后：
在開發(fā)APP時，通常情況下頁面的寬度和高度都會設為 100%，即頁面高度等于屏幕高度，頁面寬度等于屏幕寬度。
當 input 獲取焦點時，軟鍵盤彈出，頁面高度被擠壓，此時頁面高度 = 屏幕高度 - 軟鍵盤高度。所以，頁面高度縮小，元素都擠壓在一起，布局被打亂。
一種可行的解決方案：給頁面設置一個最小高度，即一個能讓所有元素按原來布局排列的高度。
舉例：
我開發(fā)的 APP 運行在 ipad上，橫屏顯示時，高度為 768px ，我可以把 768px 當做頁面的最小高度。
.app {
min-height: 768px;
/* 原來定義的高度 100% */
height: 100vh;
}
軟鍵盤還是會彈起，因為頁面最小高度被設為了 768px，所以此時總高度為 768px + 軟鍵盤高度，超出了屏幕高度（ipad橫屏屏幕高度為768px）。如上圖所示，此時原來頁面的上半部分“消失”，就是被頂上去了，只顯示原來頁面的下半部分。但至少我們要的頁面布局不變形已經(jīng)實現(xiàn)了。等輸入完，軟鍵盤收起時，頁面恢復原狀。
ipad 的問題解決了，要是 APP 運行在其他手機端上呢？此時，CSS3 @media 屬性就排上用場了。
假設要適配 iphone5 和 iphone6
/* iphone5 width:320; height:568*/
@media (min-width: 320px) {
.app {
min-height: 568px;
height: 100vh;
}
}
/* iphone6 width:375; height:667*/
@media (min-width: 375px) {
.app {
min-height: 667px;
height: 100vh;
}
}
這樣設置即可適配 iphone5 和 iphone6
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103778.html
摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區(qū)，強迫滾到位。 前言 最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。 最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。 首先經(jīng)過反復調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值： 測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。 最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。 首先經(jīng)過反復調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值： 測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。 最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。 首先經(jīng)過反復調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值： 測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...
閱讀 2306·2021-11-23 10:09
閱讀 2885·2021-10-12 10:11
閱讀 2594·2021-09-29 09:35
閱讀 1337·2019-08-30 15:53
閱讀 2261·2019-08-30 11:15
閱讀 2904·2019-08-29 13:01
閱讀 2290·2019-08-28 18:15
閱讀 3363·2019-08-26 12:13
