网易webapp 通过js计算html的font-size
来源:互联网 发布:云购cms源码 编辑:程序博客网 时间:2024/05/20 05:10
设计稿宽度为 750px,取一个100px的font-size为参照,设备宽度就可以设置为 7.5rem;
计算rem就可以直接除以100,如:100px = 1rem
var Dpr = 1, uAgent = window.navigator.userAgent; var isIOS = uAgent.match(/iphone/i); var isYIXIN = uAgent.match(/yixin/i); var is2345 = uAgent.match(/Mb2345/i); var ishaosou = uAgent.match(/mso_app/i); var isSogou = uAgent.match(/sogoumobilebrowser/ig); var isLiebao = uAgent.match(/liebaofast/i); var isGnbr = uAgent.match(/GNBR/i); function resizeRoot(){ var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize; var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight; if (window.devicePixelRatio) { wDpr = window.devicePixelRatio; } else { wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1; } if(isIOS) { wWidth = screen.width; wHeight = screen.height; } // if(window.orientation==90||window.orientation==-90){ // wWidth = wHeight; // }else if((window.orientation==180||window.orientation==0)){ // } if(wWidth > wHeight){ wWidth = wHeight; } wFsize = wWidth > 1080 ? 144 : wWidth / 7.5; wFsize = wFsize > 32 ? wFsize : 32; window.screenWidth_ = wWidth; if(isYIXIN || is2345 || ishaosou || isSogou || isLiebao || isGnbr){//YIXIN 和 2345 这里有个刚调用系统浏览器时候的bug,需要一点延迟来获取 setTimeout(function(){ wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth; wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight; wFsize = wWidth > 1080 ? 144 : wWidth / 7.5; wFsize = wFsize > 32 ? wFsize : 32; document.getElementsByTagName('html')[0].dataset.dpr = wDpr; document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px'; // document.getElementById("fixed").style.display="none"; },500); }else{ document.getElementsByTagName('html')[0].dataset.dpr = wDpr; document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px'; //document.getElementById("fixed").style.display="none"; } //alert("fz="+wFsize+";dpr="+window.devicePixelRatio+";UA="+uAgent+";width="+wWidth+";sw="+screen.width+";wiw="+window.innerWidth+";wsw="+window.screen.width+window.screen.availWidth); } resizeRoot();
1 0
- 网易webapp 通过js计算html的font-size
- webapp font-size解决问题的方案
- webapp font-size解决问题的方案
- webapp font-size解决问题的方案
- 根据font/ text,计算自己的size
- 获取html跟节点的font-size
- 不要通过html中font标签的size属性来更改文字的精确大小
- js+rem动态计算font-size的大小,适配各种手机设备
- js控制根元素的font-size大小
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- 从网易与淘宝的font-size思考前端设计稿与工作流
- Codecademy HTML Basics II Font size
- font-size和font标签的size属性的区别
- 将博客搬至CSDN
- C++学习之路
- Java对象、对象引用关系及参数传递讨论
- Android开源项目合集
- 书签 网址地址
- 网易webapp 通过js计算html的font-size
- 单词接龙
- Android应用程序管理服务启动过程浅析(PackageManagerService)
- 瀑布流
- eclipse-tomcat发布java web项目 解决404
- SearchView搜索框
- MVC中的扩展点(一)路由系统简介
- 资料分享(不定期更新。开始时间2016.4.20,最新更新时间2016.4.20)
- hdu 【1496】 Equations