H5移动端字体自适应（也适用于宽高）

青旅半醒 2022-11-26 01:45 701阅读 0赞

阅读原文扫码查看：  
![在这里插入图片描述][20200810095659200.bmp]

###### 自己研究摸索了几种H5移动端字体自适应的方法，分享出来和大家一起共享。 ######

方法一：纯css方法, 精确度高，IOS 和 安卓 字体大小同等比例  
1.1 以16px为基准，在根元素html下，字体为62.5%  
1.2 此时1rem=10px;

/* css代码 */
    html { 
      /* 10÷16=62.5% */
      font-size: 62.5%;
    }
    
    body { 
      font-size: 12px;
      /* 12÷10=1.2 */
      font-size: 1.2rem;
    }

方法二：纯css方法, 精确度高，IOS 和 安卓 字体大小同等比例  
2. 在css里，设置 html 元素的字体 font-size 设置为,50px;  
2.1 字体和元素宽度用rem，字体和元素的实际大小等于：rem乘以100除以2

/* css代码 */
    /* 在根元素html下，font-size 设置为,50px; */
    html{ 
      // 此处为重点
      font-size: 50px;
    }
    body{ 
      font-size: 12px;
    }
    
    /* 示例 设置一个宽为400px 高为150px 字体大小为 24px 的div盒子 */
    .div { 
      font-size: 0.48rem;
      width:8rem ;
      height: 3rem;
      background-color:red ;
    }
    /* 以上结果为： * width:400px; * height:150px; * font-size:24px; * /

方法三：使用JS，通过识别设备是IOS 还是 安卓，用JS动态计算rem转换px  
3. 此方法rem转px精确不是高  
3.1 以iphone6为例，rem转px 零误差；以三星S5为例，rem转px误差0002  
3.2 ios 上1rem=10px;安卓上，1rem=1.5px到1.4168px之间;因此使用了 ismobile 方法判断设备平台，使rem转转px,尽量在IOS 和 安卓上 单位长度保持统一==  
3.3 1rem=10px

// JS JS动态计算rem转换p
    function fontSize() { 
            var mobileType = ismobile(0)
            //通过navigator判断是否是移动设备
            if ((navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
              ))) { 
              //在移动端
              (function(doc, win) { 
                // html
                var docEl = doc.documentElement,
                  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                  recalc = function() { 
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // console.log("ty",mobileType);
                    if (mobileType == "Android") { 
                      console.log("我是安卓----------");
                      clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                      docEl.style.fontSize = 10.4168 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整
                    }
                    if (mobileType == "iPhone") { 
                      console.log("我是苹果----------");
                      clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                      docEl.style.fontSize = 10 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整
                    }
                  };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                recalc();
              })(document, window);
              //移动端 文字适配
            } else {  //如果是pc端我们可以像微信公众号那样，设置最大宽度为740px
              document.documentElement.style.margin = "0 auto"
              //PC端
            }
          }
          
    // -识别IOS还是安卓
          // param test: 0:iPhone 1:Android
          function ismobile(test) { 
            var u = navigator.userAgent,
              app = navigator.appVersion
            if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
                /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
                .test(navigator.userAgent))) { 
              if (window.location.href.indexOf("?mobile") < 0) { 
                try { 
                  if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) { 
                    return "iPhone";
                  } else { 
                    return "Android";
                  }
                } catch (e) { 
                  // alert(e);
                }
              }
            } else if (app.indexOf('iPad') > -1 || app.indexOf('iPhone') > -1) { 
              return "iPhone";
            } else { 
              return "Android";
    
            }
          };

[20200810095659200.bmp]: /images/20221124/ee0e0464d792485399cec31479c7fe11.png