华为,小米部分机型微信浏览器rem不适配的解决方案
针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案
目前来看,产生这个情况的原因是因为给html附font-size时,附上的font-size和实际上html的font-size 大小并不一致
如图:
在问题机型上展示的三个值 分别为 1.机型最终附给html的font-size大小 2.我想赋给html的font-size大小 3.二者的倍数
尝试找了多个问题机型,最终的比例都是1.25左右(1.24999),所以解决方案如下
//针对机型适配的代码就不贴了 网上随手一搜一堆 这里就针对特殊机型的处理展示一下
var docEl = doc.documentElement,
setFontSize = function() {
var clientWidth = document.documentElement.clientWidth,
timer;
if(!clientWidth) return;
//原本对于html的字号设置 我这里用的是750的标准 ,640的也是同理
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
if(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize) {
var size = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0];
//这里再取出当前html的font-size,和你想附的值进行比较,
//这里为什么不直接用size< 原因是正常机型的size也不一定等于你想附的值,尝试了很多机型,除了问题机型外,一般差距很小,另一半完全相等;
//为什么不直接*1.25 也不解释了 最终比例不一定是1.25
if(size*1.2 < 100 * (clientWidth / 750)) {
//如果当前html的font-size 的1.2倍仍然小于 之前想设置的值,就说明是问题机型,给之前想附的值乘1.25倍,这样他会被系统再次除1.25得到的才是我们想附的值
docEl.style.fontSize = 125 * (clientWidth / 750) + 'px';
}
}
};
em。。。。大致上能看的明白吧
至于为什么会产生这个问题,目前还不清楚,可能是因为微信浏览器或者问题机型对于根字号的处理细节不一致,可能以后会处理,但暂时没有啥别的好方法,嗯
希望能给大家一些帮助,谢谢,转载请标明出处
华为,小米部分机型微信浏览器rem不适配的解决方案的更多相关文章
- 微信浏览器 video - android适配
阶段一: 直接裸用 video 标签, 安卓 - 会重新弹一个播放层, 和之前video的父盒子错位, 要多丑有多丑, 体验要多烂有多烂. 阶段二: video添加以下属性, 安卓可实现内联播放, 但 ...
- 微信浏览器跳转浏览器下载app解决方案
新版本微信浏览器中,已禁用下载APP应用,只支持打开微信合作商APP下载,所以无法通过微信浏览器直接下载APP应用.列举微信浏览器下载APP的种解决方案: 方案:通过Url 跳转到手机默认浏览器,或者 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结
今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- 大事记 - 安卓微信浏览器 video 标签层级过高
// 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意. ...
- [bug]小米部分机型(5x、mix2)中,文字/背景闪现然后消失
2/9更新 后来遇到float 元素也这样,改成flex布局就没问题.不知道具体原因. 描述: 使用vue 2.4开发HTML5时,遇到在小米部分机型(5x.mix2)中,文字/文字背景闪现然后消失. ...
- 这个meta标签会让华为mate10 pro自带浏览器无法粘贴手机收到的验证码信息
前言 最近在项目中遇到一个问题,注册登录界面点击获取验证码,手机收到短信验证码后可以复制成功,但无法粘贴 让人郁闷的是在其它上手机上的(比如小米,苹果)默认浏览器和其它手机浏览器(比如QQ,夸克,搜 ...
随机推荐
- js 操作字符串方法记录
var str="helloworld"; 这三个方法如果只传一个参数默认截取到最后..将截取的字符返回,对原字符串没有任何改变 slice(star,end)//从索引star开 ...
- 【43.49%】【hdu3308】LCIS
Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
- IDEA + Spring boot 单元测试
1. 创建测试类 打开IDEA,在任意类名,任意接口名上,按ctrl+shift+t选择Create New Test image 然后根据提示操作(默认即可),点击确认,就在项目的/test/jav ...
- Recall(召回率);Precision(准确率);F1-Meature(综合评价指标);true positives;false positives;false negatives..
转自:http://blog.csdn.net/t710smgtwoshima/article/details/8215037 Recall(召回率);Precision(准确率);F1-Meat ...
- Java零散记录
接口不能被实例化,所以其成员变量必须为不可修改的,就是常量.
- phpcms V9自定义分页函数
大家做网站的时候,可能很多时候分页样式都得根据模板的要求来控制的,这时很多人都会去修改全局文件phpcms\libs\functions\global.func.php里的pages()函数,这样问题 ...
- <数论相关>欧几里得与拓展欧几里得证明及应用
欧几里得算法 欧几里得算法的复杂度为O(log(n)),是一个非常高效的求最大公约数算法. 在这里不证明欧几里得算法的复杂度,有兴趣的可以访问以下链接:http://blog.sina.com.cn/ ...
- destoon信息或者公司归属多个类别的解决方式
有时候,一条信息属对应于多个类别,在destoon原生系统里是没有这个解决方案 在公司行业类别选择的地方实现了这个功能,但是选择体验不太好,不符合我当前的需求,目前我写了如下解决方案 系统代码如下: ...
- 从物联网设备生命周期理解Apple Homekit框架
本次笔记主要基于苹果公开的HomeKit Accessory Protocol协议文档和IOS Security Guide中相关部分. 总体来讲,设备与App之间采用端到端的加密,密钥由设备和App ...
- javaweb项目添加log4j日志
谈到我们在Java程序中经常用的日志,Log4j应该是耳熟能详了.这里先提下slf4j,英文全名是Simple Logging Facade for Java,直面意思是:Java的简单日志门面.sl ...