关于移动端不同分辨率的处理办法

1.标明浏览器视窗

 

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

2.使用rem 或者em而不使用px

 

        function auto(){
            var width = $('body').width();
            var font_size = 0.8+'rem';//设置默认字体大小
            //var font_size2 = (width/320)*625+'%';//设置根节点字体大小 ps:默认根节点font-size:16*6.25 =100px
            var font_size2 = (width/320)*20+'px';//设置根节点字体大小 ps:默认根节点20px
            if (width>414) {
                font_size2= (414/320)*20+'px';
            }
            $('body').css('font-size',font_size);
            $('html').css('font-size',font_size2);
        }     
        auto();
        window.onorientationchange = function() {
            auto();
        };
        window.onresize = function(){
            auto();
        };

 

3.媒体查询 在使用 bootstrap 等样式标准下一般已经帮我们做了 或者使用以下代码进行根font-size的设置