問題出現
在項目中使用rem進行適配,在大部分機型上都沒有問題,但是在某些機型上卻出現了百分比的適配正確,rem的適配明顯出現錯誤,導致出現橫向滾動條或者圖標疊起來的問題。
問題排查
拿到代碼後重新跑了幾遍發現通過js算出的font-size值應該是正確的,添加到元素的時候也是正確的,那哪裏會出問題呢?打印了很多獲取值之後加上搜索大家遇到的問題,發現了這篇文章,裏面的情況和我的很相似,於是嘗試着alert了兩個值,一個是document.documentElement.style.fontSize
一個是 window.getComputedStyle(document.documentElement)['font-size']
發現值確實不同,而且有較大的區別,那就明白瞭解決方法應該是重新去定義一遍font-size的值。
問題解決
首先要明白document.documentElement.style.fontSize
這個值是我們賦給元素的值,而window.getComputedStyle(document.documentElement)['font-size']
是渲染之後拿到的實際上的font-size值,我們的目標應該是讓後面這個值儘可能的等於我們一開始想要給他設定的值。這個轉換要怎麼做呢?
我選擇的做法與鏈接中的方法相同,在第一次賦值font-size之後利用插入一個寬度爲1rem的元素,然後用getComputedStyle來獲取他的實際寬度(px),那麼得到的值就是1rem渲染時對應的像素值。
要得到實際上需要設置的font-size值只需要用
最初希望設定的font-size值的平方/1rem實際對應的像素值
然後將這個值重新賦給元素就行。
問題總結
實際渲染在移動端其實是會和直接設定的值有所出入。這個點在之後要多注意。