zoukankan      html  css  js  c++  java
  • 系统字体大小导致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);
    
    
  • 相关阅读:
    sync 解释
    USB枚举详细过程剖析(转)
    内核早期内存分配器:memblock
    LTE:eMBMS架构
    对linux内核中jiffies+Hz表示一秒钟的理解
    android的USB MTP && USB CDC/USBnet(ECM, NCM, ACM) && USB gardget
    Install Shield中调用devcon自动安装硬件驱动程序
    利用 devcon.exe实现自动安装驱动(转)
    linux系统IO调度算法
    ZooKeeper原理详解及常用操作
  • 原文地址:https://www.cnblogs.com/jarjune/p/10541517.html
Copyright © 2011-2022 走看看