移動端彈出軟鍵盤頁面變形

2021-08-01 20:49:12 字數 744 閱讀 6270

在移動端測試時發現,有定位屬性的元素,還有input框 

莫名其妙的都在彈出軟鍵盤的時候,各種扭曲,壓縮,

測試後發現情況,

我們在寫的時候,

經常會把元素的高度height 通過calc計算得出,

這是造成了被各種壓縮變形的一種情況;

還有就是,我們試用了 

vh

這個屬性,(沒有驗證);

造成了彈出虛擬輸入框的話

100vh貌似是螢幕高度 - 虛擬鍵盤的高度

所以,設定的時候,直接給固定的高度是最好的,

建議使用

rem或者

%(有人說 % 在移動端有時會出現bug,不過我沒遇到過,不清楚)

另外一種bug:,

當某些時候,新建的元素塊,其中有 

input並且input框獲得

焦點;

但是滾動條沒有滾動,還是定位在之前的位置,

這樣造成使用者不知道有沒有建立新的東西,會一直點下去,

造成這個原因 就是設定了

overflow:auto; 造成的;

取消這個屬性即可

js 移動端之監聽軟鍵盤彈出收起

js 移動端關於頁面布局,如果底部有position fixed的盒子,又有input,當軟鍵盤彈出收起都會影響頁面布局。這時候android可以監聽resize事件,如下,而ios沒有相關事件。解決安卓鍵盤彈出問題 var oheight document height window resize...

移動端選擇時間時軟鍵盤彈出問題

我採用的是emlmentui實現的時間功能 方法1 加個方法 ruleform.date focus forbid type date placeholder 選擇日期 focus forbid forbid 禁止軟鍵盤彈出 document.activeelement.blur 方法2 設定唯讀性...

android 預設彈出軟鍵盤

網上搜了下答案基本上都是 inputmethodmanager im inputmethodmanager getsystemservice input method service im.showsoftinput scoreedittext,0 scoreedittext焦點也獲取了,但就是怎麼...