手机端使用rem的适配
2024-08-29 04:53:17
<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>
最新文章
- ASP.NET MVC5----了解我们使用的@HTML帮助类
- 变量声明和定义及extern 转载
- 详解mysql int类型的长度值问题【转】
- 字符串strcpy
- Beta版本冲刺——day4
- 通过注册的URL Scheme向目标APP传递参数
- java中字符串的非空判断
- codeforces 630J	Divisibility
- POJ-3017 Cut the Sequence DP+单调队列+堆
- MySQL DBA教程:Mysql性能优化之缓存参数优化
- CAS (1) —— Mac下配置CAS到Tomcat(服务端)(转)
- hdu4670(树上点分治+状态压缩)
- 分布式架构ActiveMQ的安装与使用(单节点)
- 关于FGPA的复位
- python_flask项目(BBS)_01
- Lodop打印html数字间隔不一致
- Hadoop启动之后jps没有NameNode节点
- java 中异常处理示例并捕获完整异常内容
- 自己动手实现java数据结构(七) AVL树
- mysql字符集问题,及排序规则