手机端H5页面适配

手机端H5页面适配

第一种方法（单位用rem，自己调试即可），将一下js复制到页面即可。

适配js方法一：

        function fontSize(){
            var deviceWidth=document.documentElement.clientWidth>768?768:document.documentElement.clientWidth;
            document.documentElement.style.fontSize=(deviceWidth/25)+"px";
        }
        fontSize();
        window.onresize=fontSize;

适配js方法二：

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

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

第二种方法

页面头部如下：

单位用px自行调整就可以。
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">