緣由：內部測試都ok，交給客戶看的時候，整天變大，本來7.5rem = 750px，實際上大了很多。
各種情況排除後，發現是客戶手機字型大小調整到了特大號
getcomputedstyle方法能夠獲取到計算後的樣式、大小。
最後優化完的**如下。
(function (doc, win)
if (window.devicepixelratio == 3)
}var text = '';
document.write(text);
var docel = doc.documentelement
var resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function ()
if (!doc.addeventlistener) return
recalc()
win.addeventlistener(resizeevt, recalc, false)
})(document, window);
posted @
2019-03-16 11:37
jarjune 閱讀(
...)
編輯收藏
乙個因為系統字型大小設定導致的rem計算渲染異常問題
測試同學突然拿著一部手機過來說，h5渲染各個元素都變大了，有些元素撐出了螢幕外面。本來以為是某個webview的渲染相容問題，結果發現所有的瀏覽器都這樣。莫名其妙，隱約感覺是 rem計算出了問題，開始一點點查。因為，組內移動端專案，統一約束了寬度滿屏7.5rem，所以，先看看這個比例 alert f...
rem用來設定字型大小
rem用來設定字型大小，也可以用於網格布局。rem中的r代表根元素，它的值就是根元素設定的字型大小。在大多數情況下，根元素就是html了。這個單位可以解決em設定字型時，由於繼承帶來的問題，具體如下 body div 假設html存在這樣的結構 test test test div div div ...
rem設定網頁字型大小
rem 是指根元素 root element，html 的字型大小，好開心的是，從遙遠的 ie6 到版本帝 chrome 他們都約好了，根元素預設的 font size 都是 16px。這樣乙個新的單位相容性如何呢？ie9 firefox chrome safari opera 的主流版本都支援了，...