通过JS设置font-size之后，在小米手机自带的浏览器上会失效

Question

比如设置html的font-size是36px，在小米自带浏览器中会变成31px。

Answer 1

遇到过同样的问题，小米4c上出现的，不知道你说的是哪台机器。

同事在htc的机器上也出现过，直接贴代码，看注释吧，看看是不是同一个问题。

(function(window,document){
    var screenWidh,
        html=document.documentElement;//页面宽度


    function getHtmlFs(){
        return parseFloat(window.getComputedStyle(html, null)['font-size']);
    }

    function setMediaCss(){

        if(!screenWidh){
            //第一次进来没有设置过html标签font-size的时候
            screenWidh=html.offsetWidth;//获取页面宽度

            html.style.fontSize=100/750*screenWidh+'px';//根据页面大小算出font-size
            //以下是特殊处理 试过一台htc下的某个浏览器设置字体大小后再获取font-size会比所设的值会相对变小 所以设置大一点让它font-size的结果是想设的结果
            var htmlFs=getHtmlFs();
            var mediaFs=100/750*screenWidh;

            if(htmlFs!==mediaFs && (htmlFs>mediaFs+1 || htmlFs<mediaFs-1)){
                html.style.fontSize='100px';
                html.style.fontSize=100/getHtmlFs()*mediaFs+'px';
            }
        }else{
            //存在screenWidh
            var newScreenWidh=html.offsetWidth;
            if(screenWidh != newScreenWidh){//screenWidh不等于当前页面宽度肯定是旋转屏幕后触发的
                var style=document.createElement('style');//创建style标签设置media
                style.innerHTML='@media only screen and (width: '+newScreenWidh+'px) {html{font-size: '+100/750*newScreenWidh+'px !important;}}';
                document.getElementsByTagName('head')[0].appendChild(style);//把style插入到head里面
                window.removeEventListener('orientationchange',orientationchange);//设置了横竖屏的情况之后可以把旋转触发去掉
            }
        }
    }

    setMediaCss();
    //安卓要考虑两种情况一个是横屏一个是竖屏幕

    function orientationchange(){
        //旋转屏幕监控
        setTimeout(function(){
            setMediaCss();//设置html标签font-size
        },300);
    };
    window.addEventListener('orientationchange',orientationchange);

})(window,document);