最近一直在做手机端的东西,各种型号的手机适配很是无解。经过同事及百度找到了这么一个方法 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>

 

手机端使用rem适配的更多相关文章

  1. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  2. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  3. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  4. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  5. 手机端布局 - rem计算

    功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...

  6. 【学习】如何制作手机端html模板(REM的实际应用)

    以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...

  7. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  8. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  9. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

随机推荐

  1. 关于提交form不刷新的问题

    最近在做一个项目,除去主页面是html页面,点击菜单按钮都由ajax加载生成,在这种情景下,F5刷新或者提交form表单就会将页面回复到刚刚打开主页面. 现在有一个这样的场景,点击子菜单生成一个子页面 ...

  2. 了解 JavaScript 应用程序中的内存泄漏

    简介 当处理 JavaScript 这样的脚本语言时,很容易忘记每个对象.类.字符串.数字和方法都需要分配和保留内存.语言和运行时的垃圾回收器隐藏了内存分配和释放的具体细节. 许多功能无需考虑内存管理 ...

  3. 如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)

    Java time JavaScript Math.round(new Date().getTime()/1000)getTime()返回数值的单位是毫秒 Microsoft .NET / C# ep ...

  4. centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复

    centos环境下使用percona-xtrabackup对mysql5.6数据库innodb和myisam进行快速备份及恢复 有时候我们会碰到这样的业务场景: 1.将大的数据库恢复到本地进行业务测试 ...

  5. 随笔—邀请赛前训— Codeforces Round #330 (Div. 2) B题

    题意: 这道英文题的题意稍稍有点复杂. 找长度为n的数字序列有多少种.这个序列可以分为n/k段,每段k个数字.k个数可以变成一个十进制的数Xi.要求对这每n/k个数,剔除Xi可被ai整除的情况,剔除X ...

  6. linux C学习笔记03--单链表

    单链表一直是程序员的基础,我也来复习下,下面是link.c中的代码,供main.c 调用,代码很简单,单链表的插入,删除,查找和遍历输出, #include <stdio.h> #incl ...

  7. Spring 定时执行任务重复执行多次

    使用spring的定时任务组件的时候,代码如下. @Scheduled(cron="0 5/5 * * * ?") public void sendWeatherSMS() { S ...

  8. uiwebview底部黑边解决

    解决方法 设置webview的opaque为no

  9. detection reading

    1512.07729v1 G-CNN an Iterative Grid Based Object Detector,先基于空间金字塔生成很多矩形框,然后把这些矩形框作为regions,进行fast ...

  10. 修改myeclipse的servlet模板

    今天修改myeclipse的servlet模板时,发生 Could not create the view: An unexpected exception was thrown.错误. 解决方案:1 ...