關於rem佈局問題

weixin_34247155發表於2018-05-02
REM

我們移動H5頁佈局一般會引入
9159664-60a328f72b48e0fb.png
Clipboard Image.png

這個js檔案來設定根元素的font-size，從而換算之後在頁面中rem佈局。這次我做h5活動頁，還是那個安卓下喚起軟鍵盤整個頁面變小問題，關於這個問題我們不能按照原先的佈局一直這樣下去。所以我抽時間查詢了一下這個問題。如下：

1、先看我們的程式碼：
9159664-f9f3b890cb2db4f3.png
Clipboard Image.png

程式碼中alert出獲取寬度的方法名：根元素的font-size;

下面看下在iOS和安卓下的對比：

iOS：

（1）剛渲染頁面彈出：

9159664-c60a5a370b4275b7.png
Clipboard Image.png

（2）點選輸入框喚起軟鍵盤：頁面沒有任何變化，沒有彈出alert；

9159664-97a794bc0be9fe5a.png
Clipboard Image.png

安卓：

（1）、剛渲染頁面彈出：

9159664-fb1001829156bf11.png
Clipboard Image.png

（2）、點選輸入框彈出

9159664-21b58d11667deb72.png
Clipboard Image.png

（3）、點選以上確定後頁面變小並再次彈出，此時font-size=(2)中39.6px；

9159664-022bf157e5516564.png
Clipboard Image.png

原因：Android軟鍵盤的顯示原理

軟鍵盤其實是一個Dialog

InputMethodService為我們的輸入法建立了一個Dialog，並且對某些引數進行了設定，使之能夠在底部或者全屏顯示。當我們點選輸入框時，系統會對當前的主視窗進行調整，以便留出相應的空間來顯示該Dialog在底部，或者全屏。

相關看下原理解析：傳送門

所以，由於軟鍵盤造成主視窗的調整，clientWidth再次獲取會變化；

具體涉及獲取寬高度的看圖，定義感覺很模糊：

9159664-f71bb2418b96796f.png
Clipboard Image.png

解決問題（兩種思路）：

1、修改獲取方式：

A、改用offsetWidth/offsetHeight:（節省空間就不附圖了）

iOS:

（1）剛渲染頁面彈出：offsetWidth：55.2px;

（2）擊輸入框喚起軟鍵盤：頁面沒有任何變化，沒有彈出alert；

安卓：

（1）剛渲染頁面彈出：offsetWidth：48px;

（2）點選輸入框彈出：offsetWidth：48px;

（3）點選以上確定後頁面變小並再次彈出：offsetWidth：48px;

這種方式可以在安卓點選輸入框時不改變頁面大小；

B、用getBoundingClientRect.width、getBoundingClientRect.height獲取同樣可以達到不改變頁面大小問題；只是此方法有相容問題。

2、考慮安卓在喚起軟鍵盤的時候禁止預設行為，目前沒有實現；

總結：

以後我們在引入此外掛時需要修改clientWidth、clientHeight為offsetWidth、offsetHeight;我也找了下用offsetHeight的影響，如：計算offsetWidth與offsetHeight 屬性，獲取元素在視窗中的位置會導致頁面的迴流影響效能，還有就是換了offsetWidth之後對其他功能的頁面的影響。

我們在這個檔案中做一層安卓的判斷，為了不影響之前，另起一個檔案運用並測試；

相關文章