前端自适应遇到用户更改系统字体大小

前端设置rem大小，遇到了用户更改系统字体大小不要怕

对于我们常用自适应屏幕rem流派而言，一旦用户更改了系统字体大小我们的页面就会变得面目全非，这是因为我们并没有实际去获取到页面默认的字体大小。

1.-webkit-text-size-adjust
这个属性允许开发者去除或者修改这个浏览器默认行为，因为当网页设计已经处理小屏幕的宽度问题时不需要他。

-webkit-text-size-adjust:100%;

2.js不仅获取屏幕宽度，也要获取默认字体大小
我们之前的rem流派都是获取屏幕宽度而忽视了用户设置的默认字体大小，我们只要按照用户字体大小和默认字体大小的比例来处理原来的数据就可以继续自适应屏幕了，代码一般IIFE，大同小异

        (function(doc,win){
            //  用原生方法获取用户设置的浏览器的字体大小（兼容IE）
            var docEl = doc.documentElement;
            if(docEl.currentStyle){
                var user_webset_font = docEl.currentStyle['fontSize'];
            }else{
                var user_webset_font = getComputedStyle(docEl,false)['fontSize'];
            }

            //  取整后与默认16px像素的比例系数
            var xs = (parseFloat(user_webset_font)/16).toFixed(2);

            //  设置rem的js设置的字体大小
            var view_jsset_font, result_font,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                clientWidth,
                recalc = function(){
                  clientWidth = docEl.clientWidth;
                  if(!clientWidth) return;
                  if(!doc.addEventListener) return;
                  if(clientWidth < 640){
                      //    设置rem的js设置的字体大小
                      view_jsset_font = 100 * (clientWidth / 640);
                      //    最终的字体大小为rem字体/系数
                      result_font = view_jsset_font/xs;
                      //    设置根字体大小
                      docEl.style.fontSize = result_font + 'px';
                  }else{
                      docEl.style.fontSize = 100 + 'px';
                  }
                };
            if (!doc.addEventListener) return;
            //  用户屏幕变化时
            window.addEventListener(resizeEvt,recalc,false);
            //  用户加载页面dom加载完成
            doc.addEventListener('DOMContentLoaded',recalc,false);
        })(document,window)

3.重新配置webview
这一步需要和安卓同事沟通，让他们重置webview的比例大小，设为100%

webview.getSettings().setTextZoom(100);

说到底前端还是需要基础扎实才能走的更远