<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的适配的更多相关文章

  1. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

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

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

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

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

  4. 适配手机端之 rem

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

  5. 手机端布局 - rem计算

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

  6. 手机端@media的屏幕适配

    @media only screen and (width: 320px) { html { font-size: 16px; }} @media only screen and (width: 36 ...

  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. 【学习】如何制作手机端html模板（REM的实际应用）

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

随机推荐

  1. bootstrap-treeview简单使用

    废话不多说,直接上干干货. 1.bootstrap-treeview Github网址:https://github.com/jonmiles/bootstrap-treeview 2.使用要求: & ...

  2. PostgreSQL Replication之第四章 设置异步复制（6）

    4.6 有效的清理和恢复结束 最近几年, recovery.conf 已经变得越来越强大了.早在初期(在 PostgreSQL 9.0之前), 仅有 restore_command 和一些 recov ...

  3. bzoj 2259: [Oibh]新型计算机 最短路 建模

    Code: #include<cstdio> #include<cstring> #include<algorithm> #include<queue> ...

  4. nginx直接连接操作memcache

    原理:     Nginx 要设定一个 key 去查 mem ,如果没查到,要有一个回调 php ,并且 key 传给 php.     配置方式:     server{               ...

  5. 用树链剖分来写LCA

    当两个点在一条链上,它们的LCA就是深度较小的那个点. 于是这种树链剖分写LCA的思想就是把要求的两个点想办法靠到一条链上. 而且要靠到尽量更优的一条链上(重链). 做法: 预处理出每棵树上的重链(s ...

  6. vsftp迁移记录笔记

     由于之前的服务器用的window下的ftp安全性和稳定性都不好,所以我们才把ftp迁移到linux环境下 vsftp概述: vsftpd 它可以运行在多平台系统上面,是一个完全免费的.开放源代码的f ...

  7. 题解 P3243 【[HNOI2015]菜肴制作】

    这道题看起来就是个裸的拓扑排序,抄上模板就能AC. 上面这种想法一看就不现实,然鹅我第一次还真就这么写了,然后被随意hack. 我们需要注意一句话: 现在,酒店希望能求出一个最优的菜肴的制作顺序,使得 ...

  8. 【习题 8-17 UVA - 11536】Smallest Sub-Array

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 尺取法. 考虑一个1..i的窗口. 里面在到达了i位置的时候恰好有1..k这些数字了. 为了更接近答案. 显然可以试着让左端点变成2 ...

  9. 转：Mac下搭建svn服务器和XCode配置svn

    Mac下搭建svn服务器和XCode配置svn 先打开命令行终端. 1.创建svn repository svnadmin create /yourpath/svnroot/repository 2. ...

  10. ！HDU 2602 Bone Collector--DP--（裸01背包）

    题意:这题就是一个纯粹的裸01背包 分析:WA了好几次.01背包实现的一些细节没搞懂 1.为什么dp[i][j]赋初值为0而不是value[i].由于第i个石头可能不放! 2.在进行状态转移之前要dp ...