码迷,mamicode.com
首页 > 移动开发 > 详细

手机端使用rem的适配

时间:2016-12-18 23:48:53      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:minimum   java   listener   type   rip   useragent   function   htm   ini   

    <html>
        <body>
                <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d3125.html -->
                <script type="text/javascript">
                        var phoneWidth =  parseInt(window.screen.width);

                        var phoneScale = phoneWidth/640;
                        var ua = navigator.userAgent;
                        if (/Android (\d+\.\d+)/.test(ua)){
                            var version = parseFloat(RegExp.$1);
                            // andriod 2.3
                            if(version>2.3){
                                document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);
                                // andriod 2.3以上
                            }else{
                                document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
                            }
                            // 其他系统
                        } else {
                            document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
                        }
                        //微信去掉下方刷新栏
                        if(RegExp("MicroMessenger").test(navigator.userAgent)){
                            document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady() {
                                WeixinJSBridge.call(‘hideToolbar‘);
                            });
                        }
                        //rem换算
                        (function (doc, win) {
                            var docEl = doc.documentElement,
                                    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
                                    recalc = function () {
                                        var clientWidth = docEl.clientWidth;
                                        if (!clientWidth) return;
                                        if(clientWidth>=640){
                                            docEl.style.fontSize = ‘100px‘;
                                        }else{
                                            docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;
                                        }
                                    };

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

  

手机端使用rem的适配

标签:minimum   java   listener   type   rip   useragent   function   htm   ini   

原文地址:http://www.cnblogs.com/zhujiasheng/p/6195871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!