JS动态计算移动端rem的解决方案


Posted in Javascript onOctober 14, 2016

在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样:

html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important; 
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important; 
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important; 
}
}

但是这种做法并不能适配所有设备,于是就有了实现全适配的JS解决方案,例如下面这样:

;(function (doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

另外附上淘宝移动端适配解决方案flexible.js源码:

;(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
//将根据已有的meta标签来设置缩放比例
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2)); 
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2)); 
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));

以上所述是小编给大家介绍的JS动态计算移动端rem的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 #Javascript
第一次接触神奇的Bootstrap
Oct 14 #Javascript
js仿手机页面文件下拉刷新效果
Oct 14 #Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 #Javascript
js关于getImageData跨域问题的解决方法
Oct 14 #Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 #Javascript
You might like
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js中function()使用方法
2013/12/24 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
JS重载实现方法分析
2016/12/16 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python 连连看连接算法
2008/11/22 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python实现自动登录
2018/09/17 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
后勤工作职责
2013/12/22 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
Python 如何安装Selenium
2021/05/06 Python