手机端使用rem适配

2021-08-31 20:59:04

最近一直在做手机端的东西，各种型号的手机适配很是无解。经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的。因为最近也是刚刚用，还在摸索中，有兴趣的朋友可以研究下。如有问题，还请见谅。（ps只有新的页面或者项目适用，不适于用二开的项目避免发生不必要的问题）

<script type="text/javascript">
      var phoneWidth =  parseInt(window.screen.width);
      var phoneScale = phoneWidth/640;
      var ua = navigator.userAgent;
      if (/Android (/d+/./d+)/.test(ua)){
         var version = parseFloat(RegExp.$1);
         // andriod 2.3
         if(version>2.3){
            document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+’, maximum-scale = ‘+phoneScale+’, target-densitydpi=device-dpi">’);
            // andriod 2.3以上
         }else{
            document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">’);
         }
         // 其他系统
      } else {
         document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">’);
      }
      //微信去掉下方刷新栏
      if(RegExp("MicroMessenger").test(navigator.userAgent)){
         document.addEventListener(‘WeixinJSBridgeReady’, function onBridgeReady() {
            WeixinJSBridge.call(‘hideToolbar’);
         });
      }
      //rem换算
      (function (doc, win) {
         var docEl = doc.documentElement,
                  resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
                  recalc = function () {
                     var clientWidth = docEl.clientWidth;
                     if (!clientWidth) return;
                     if(clientWidth>=640){
                        docEl.style.fontSize = ‘100px’;
                     }else{
                        docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px’;
                     }
                  };

if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
         doc.addEventListener(‘DOMContentLoaded’, recalc, false);
      })(document, window);
</script>