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 相关文章推荐
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
vue实现移动端触屏拖拽功能
Aug 21 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单例模式应用详解
2013/06/03 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python命令 -u参数用法解析
2019/10/24 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
数据库方面面试题
2012/04/22 面试题
会议开场欢迎词
2014/01/15 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
革命电影观后感
2015/06/18 职场文书
中学音乐课教学反思
2016/02/18 职场文书
四年级语文教学反思
2016/03/03 职场文书