針對近日華為,小米的部分機型,在升級系統或升級微信之後,微信內置瀏覽器產生的rem不能正確填充滿的問題,有如下解決方案 目前來看,產生這個情況的原因是因為給html附font-size時,附上的font-size和實際上html的font-size 大小並不一致 如圖: 在問題機型上展示的三個值 分 ...
針對近日華為,小米的部分機型,在升級系統或升級微信之後,微信內置瀏覽器產生的rem不能正確填充滿的問題,有如下解決方案
目前來看,產生這個情況的原因是因為給html附font-size時,附上的font-size和實際上html的font-size 大小並不一致
如圖:
在問題機型上展示的三個值 分別為 1.機型最終附給html的font-size大小 2.我想賦給html的font-size大小 3.二者的倍數
嘗試找了多個問題機型,最終的比例都是1.25左右(1.24999),所以解決方案如下
//針對機型適配的代碼就不貼了 網上隨手一搜一堆 這裡就針對特殊機型的處理展示一下
var docEl = doc.documentElement, setFontSize = function() { var clientWidth = document.documentElement.clientWidth, timer; if(!clientWidth) return;
//原本對於html的字型大小設置 我這裡用的是750的標準 ,640的也是同理 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
if(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize) { var size = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0];
//這裡再取出當前html的font-size,和你想附的值進行比較,
//這裡為什麼不直接用size< 原因是正常機型的size也不一定等於你想附的值,嘗試了很多機型,除了問題機型外,一般差距很小,另一半完全相等;
//為什麼不直接*1.25 也不解釋了 最終比例不一定是1.25 if(size*1.2 < 100 * (clientWidth / 750)) {
//如果當前html的font-size 的1.2倍仍然小於 之前想設置的值,就說明是問題機型,給之前想附的值乘1.25倍,這樣他會被系統再次除1.25得到的才是我們想附的值 docEl.style.fontSize = 125 * (clientWidth / 750) + 'px'; } } };
em。。。。大致上能看的明白吧
至於為什麼會產生這個問題,目前還不清楚,可能是因為微信瀏覽器或者問題機型對於根字型大小的處理細節不一致,可能以後會處理,但暫時沒有啥別的好方法,嗯
希望能給大家一些幫助,謝謝,轉載請標明出處