解決手機系統設置字體大小后,qq內置瀏覽器rem排版錯亂問題

我們移動端項目用postcss-pxtorem插件來自適應rem

先要在計算根節點的字體

    const baseSize = 32;

    // 設置 rem 函數
    function setRem() {
      // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。
      const scale = document.documentElement.clientWidth / 750;
      // 設置頁面根節點字體大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }

    // 初始化
    setRem()
    // 改變窗口大小時重新設置 rem
    window.onresize = function () {
      setRem()
    };    

在qq內置瀏覽器中我發現添加的字體大小會隨着系統設置的字體大小倍數走

最后找到window.getComputedStyle（）方法能查詢到放大后的字體大小，我們可以根據放大倍數來再次設置字體大小

最終修改完成

    // 基准大小
    const baseSize = 32;

    // 設置 rem 函數
    function setRem() {
      // 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。
      const scale = document.documentElement.clientWidth / 750;
      // 設置頁面根節點字體大小
      let fontSize = baseSize * Math.min(scale, 2)
      document.documentElement.style.fontSize = fontSize + 'px'
      // 解決手機系統設置字體大小后,qq內置瀏覽器rem排版錯亂問題
      // getComputedStyle能獲取被系統放大后的字體
      let computedFontSize = window.getComputedStyle(document.getElementsByTagName("html")[0])['font-size'].replace(/px/gi, '')
      let multiple = fontSize / computedFontSize
      document.documentElement.style.fontSize = (fontSize * multiple) + 'px'
    }
    // 初始化
    setRem()
    // 改變窗口大小時重新設置 rem
    window.onresize = function () {
      setRem()
    };