手淘移动适配方案flexible.js兼容bug处理
什么是flexible.js 移动端自适应方案
https://www.jianshu.com/p/04efb4a1d2f8
什么是rem
这个单位代表根元素的 font-size 大小(例如 元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于html的根字体默认大小的2倍,当然此时页面中字体的大小也是html的根字体默认大小的2倍)。
注 此处的font-size大小为html元素的最终大小而非设置大小
mdn length概述
兼容问题描述
代码如下
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;}
docEl.style.fontSize = rem + 'px';将根元素htmlfont-size大小设置为屏幕10分之一大小的绝对宽,如设备宽750px那么html
font-size`为75px。
但实际上在不同浏览器上字体大小不一定显示为75px,
计算使用到方法
getComputedStyle
Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
getPropertyValue
此 CSSStyleDeclaration.getPropertyValue() 接口会返回一个 DOMString ,这个返回值将会包含预请求的CSS属性信息。
计算方式如下
window.getComputedStyle(docEl).getPropertyValue('font-size')
此方法计算得到html最终的font-size大小
正常情况下返回的和我们设置的font-size大小一致,但是在某些浏览器上会显示不一致导致我们页面在此类设备上存在布局的差异
解决方法
计算公式
你当前设置的fontSize / 实际计算的fontSize = 你需要设置的fontSize / 你当前设置的fontSize
根据这个计算公式重新设置fontSize的大小
var root = window.document.documentElement;
var fontSize = parseFloat(root.style.fontSize);
var finalFontSize = parseFloat(window.getComputedStyle(root).getPropertyValue("font-size"));
if(finalFontSize !== fontSize) {root.style.fontSize = fontSize * fontSize / finalFontSize + "px";
}
完整代码
注:本项目中代码基于源码有修改
;(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 = {});var fontSizeCoefficient = 1;if (metaEl) {console.warn('将根据已有的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 = 2;} 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 * fontSizeCoefficient + "px";var finalFontSize = parseFloat(window.getComputedStyle(docEl).getPropertyValue("font-size"));let tempCoefficient = rem / finalFontSize;if (tempCoefficient !== 1) {fontSizeCoefficient = tempCoefficient;docEl.style.fontSize = rem * fontSizeCoefficient + "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);refreshRem();// setTimeout(refreshRem, 800);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'] = {}));
其他资料
网上查到有这个文章 http://web.jobbole.com/91772/
这个文章中计算公式 是 docElementFontSize+(docElementFontSize – finalDocElementFontSize) 不知道作者是如何得出的,但是我发现这个方法在我们存在有问题的的手机上测试并不可行
个人公众号
转载于:https://www.cnblogs.com/net-xiejun/p/9651246.html
手淘移动适配方案flexible.js兼容bug处理相关推荐
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- CSS—移动端适配方案flexible.js
目录 一.概述 二.详解 一.概述 移动端适配一直以来都是前端开发中不可或缺的重要组成部分.flexible.js插件是一个终端设备适配的解决方案.flexible.js插件通过实现rem单位的自适应 ...
- 阿里手淘可伸缩布局方案amfe-flexible解决vue移动端适配问题
前言: 由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题.建议大家开始使用viewport来替代此方 ...
- 移动端html适配方案,原生js实现 兼容常规pc、大屏、移动端 适配方案
1.设计稿 1)pc设计稿为19201080的可视化大屏,16:9比例设计 2)大屏设计稿35841152的可视化大屏,28:9比例设计 3)移动端设计稿 宽750的可视化大屏 2.适配不同屏幕 1) ...
- element 手机适配_手机端rem适配方案_蓝戒的博客
方案一: 1.viewport设置: 2.html根元素font-size设置(注:设计稿640px): var deviceWidth = document.documentElement.clie ...
- 移动端适配+flexible.js+rem适配
移动端适配 前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
- 移动端(五)flexible.js + rem适配布局
rem适配方案flexible.js github地址:https://github.com/amfe/lib-flexible flexible.js 是手机淘宝团队出的移动端布局适配库 不需要在写 ...
- 使用Flexible.js实现手机端网页内容适配(rem适配法)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- 使用Flexible实现手淘页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
- 手淘 flexible
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
最新文章
- Udacity机器人软件工程师课程笔记(三十三) - 蒙特卡洛定位算法(MCL)
- 七年改变,如今年薪60W,分享这些年的经验总结!
- 安装了email模块还是报错_科普:利用Python smtplib和email模块实现自动发送邮件功能...
- 神策数据:围绕跨境电商“人货场”,数据如何助力品牌乘风出海?
- 【数据结构】顺序线性表的构造和存储数据
- python网络框架生产环境_配置Django框架为生产环境的注意事项(DEBUG=False)
- python Django创建数据库时can't open file 'manage.py': [Errno 2] No such file or directory
- Python基础案例练习:掷骰子小游戏
- 如何实现SSH断开后 进程仍然在后台运行
- js href的用法
- redis 系列16 持久化 RDB
- 前段基础html常用标签,web前端开发网络课程,HTML常用的五种标签
- chrome 内核CEF 编译和qt 封装(上)
- uniapp 查看图片点击放大预览图片 单张 多张
- 野人岛java游戏,生存战争之独闯野人岛
- word怎么竖向选中,word怎么文字竖排的两种方法
- 翻转单词顺序(python)
- QQ小程序开发者工具及官网
- workbook需要引入的包_用Java玩转Excel,竟然如此easy~
- keras 中adam_ADAM电影中的照明技巧和窍门
热门文章
- ORACLE10G让空间管理变轻松【SPACE MANAGEMENT MAKE EASILY ON ORACLE10G】
- Illustrator 教程,如何在 Illustrator 中格式化文本?
- 苹果Mac记事本中快速计算应用:Soulver
- PS滤镜插件工具箱Mac版:Nik Collection 4
- Macbook Pro休眠唤醒后后台运行程序被关闭的解决方法
- S9300 STP 配置规范
- 动态修改log4net设置
- 为翻译软件提供云端语料库支持,Tmxmall 瞄准了语言领域的大数据
- JavaScript常见封装方法
- B/S架构 Web打印程序(Argox)