移动端适配

最新推荐文章于 2022-05-20 17:35:42 发布

原创最新推荐文章于 2022-05-20 17:35:42 发布 · 4.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#移动web #javascript

web前端之路专栏收录该内容

31 篇文章

订阅专栏

移动端适配js，整理之：

(function(doc,win){var docEl=doc.documentElement,resizeEvt='orientationchange'in window?'orientationchange':'resize',recalc=function(){var clientWidth=docEl.clientWidth;if(!clientWidth)return;docEl.style.fontSize=10*(clientWidth/320)+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);

复制引入即可
2016年4月22日更新，在pc端打开，布局模块会巨大，做了判断，在宽度大的设备上，设个阀值，当大于这个宽度，则字体不会进行放大，预想应该是这个样子：

(function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              if ((10 * (clientWidth / 320)) <= 20) { 
                docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
              }else{
                docEl.style.fontSize = 20 + 'px';
              }
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);