• 手机端使用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>

     
  • 相关阅读:
    (转载)林轩田机器学习基石课程学习笔记1 — The Learning Problem
    二、HDFS(架构、读写、NN)
    剑指:和为S的两个数字
    剑指:和为S的连续正数序列
    Hive:数据倾斜
    linux如何查看端口被哪个进程占用
    du查看某个文件或目录占用磁盘空间的大小
    剑指:滑动窗口的最大值
    leetcode之求众数
    剑指:重建二叉树
  • 原文地址:https://www.cnblogs.com/wysdddh/p/6226636.html
Copyright © 2020-2023  润新知