系統字體大小導致rem布局變大


緣由:內部測試都ok,交給客戶看的時候,整天變大,本來7.5rem = 750px,實際上大了很多。

各種情況排除后,發現是客戶手機字體大小調整到了特大

解決辦法

getComputedStyle方法能夠獲取到計算后的樣式、大小。

最后優化完的代碼如下。


	(function (doc, win) {

      var isAndroid = win.navigator.appVersion.match(/android/gi);
      var isIPhone = win.navigator.appVersion.match(/iphone/gi);

      var scale = 1.0;
      var ratio = 1;
      if(isIPhone) {
        if (window.devicePixelRatio == 2) {
          scale *= 0.5;
          ratio *= 2;
        }
        if (window.devicePixelRatio == 3) {
          scale *= (1/3);
          ratio *= 3;
        }
      }
      var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
      document.write(text);

      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 750)  + 'px'

        // 解決部分rem特別大的問題
        var docElFontSize = docEl.style.fontSize.replace(/px/gi, '')
        var computedFontSize = win.getComputedStyle(docEl)['font-size'].replace(/px/gi, '')
        docElFontSize != computedFontSize && (docEl.style.fontSize = docElFontSize * docElFontSize / computedFontSize + 'px')
      }
      if (!doc.addEventListener) return
      recalc()
      win.addEventListener(resizeEvt, recalc, false)
	})(document, window);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM