• 手机端使用rem适配


    最近一直在做手机端的东西,各种型号的手机适配很是无解。经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的。 因为最近也是刚刚用,还在摸索中,有兴趣的朋友可以研究下。如有问题,还请见谅。(ps只有新的页面或者项目适用,不适于用二开的项目避免发生不必要的问题)

    
    

    <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>

     
  • 相关阅读:
    Python自动截图html页面
    filebeat+kafka+logstash+Elasticsearch+Kibana日志收集系统搭建
    k8s重要概念
    1721. 使括号有效的最少添加
    167. 链表求和
    272. 爬楼梯 II
    1609. 链表的中间结点
    SQL server查看触发器是否被禁用
    C#窗体内控件大小随窗体等比例变化
    微信接口返回码参考表
  • 原文地址:https://www.cnblogs.com/wysdddh/p/6226636.html
Copyright © 2020-2023  润新知