hotcss.js Flexible 移動端適配在dpr=2和dpr=3出現的字體大小設置不正確問題.

  這段時間一直在用hotcss做移動端適配,做了幾個頁面沒有發現什么問題,后來老大要加快進度,我把項目分出一塊給另一個同事做,她發現了一個問題就是字體在dpr=2,dpr=3,的設備上字體大小顯示老是不正確.

 

字體明明設置的是34px;computed完成之后偏偏顯示的是38.44px;比實際大了不少,並且查找了好多資料頁沒解決問題,

后來看了下別人的例子,像下邊這樣寫就會顯示正確.

,

 

加了max-height: 100%; display: block;這2個屬性突然就好了.測試了下發現,只要將dom元素設置成能設置大小的元素就可以,包括float:left;inline-block等,再加上max-height: 100%;就解決了.

雖然原理沒去研究,猜測應該是dpr縮放導致元素計算錯誤的.

 今天又研究了一下,發現只要將max-height: 100%; 加到body下,最高級的父元素問題就解決了,如圖:

 

這樣不管他下邊元素是什么display格式的都可以,親測非常方便.
但是試了下加到body上不行.

過了這么長時間,用以上方法解決后,發現這個問題又出現了,在安卓手機UC瀏覽器上字體大小還是不正確,會變很大.

目前我的解決辦法是將元素的高度寫死,display為inline-block,block.或者float:left;

發現此問題的朋友們可以根據實際環境去調整.有誰發現更好的辦法.可以在下方評論分享給大家.