我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己去核对你们的js是不是和我分享的不一样.请尽快修复bug.免得被祭天吐槽~

//rem.js
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
var div = document.createElement('div');
div.style.width = '1.4rem';
div.style.height = '0';
document.body.appendChild(div);
var ideal = 140 * clientWidth / 750;
var rmd = (div.clientWidth / ideal);
if (rmd > 1.2 || rmd < 0.8) {
docEl.style.fontSize = 100 * (clientWidth / 750) / rmd + 'px';
}
document.body.removeChild(div);
};
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

移动端Web适配单位rem的坑,oppo r9手机出现错位bug的更多相关文章

  1. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  2. 移动web适配利器-rem

    移动web适配利器-rem 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移 ...

  3. 国内外移动端web适配屏幕方案

    基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...

  4. 国内外移动端web适配屏幕方案总结

    基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...

  5. 移动端Web适配的两种做法思路总结

    看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...

  6. vue 移动端屏幕适配 使用rem

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...

  7. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

  8. 移动端屏幕适配(rem+js)

    什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样. 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距.留白,以及 ...

  9. 那些移动端web踩过的坑

    原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...

随机推荐

  1. 弹性网卡支持私网多IP

    摘要: 弹性网卡支持多IP功能可以最多在一块弹性网卡配置20个私网IP地址,特别适用于于以下场景. 1.单个服务器上托管多个应用,提升实例利用率,每个应用对外暴露一个独立的服务IP地址. 2.当实例发 ...

  2. luoguP3414 SAC#1 - 组合数

    题目背景 本题由世界上最蒟蒻最辣鸡最撒比的SOL提供. 寂月城网站是完美信息教室的官网.地址:http://191.101.11.174/mgzd . 题目描述 辣鸡蒟蒻SOL是一个傻逼,他居然觉得数 ...

  3. SpringBoot_05_ssm拦截器和默认欢迎页面的设置

    1.在springBoot下通过使用拦截器完成在没有登陆的前提下,不允许访问其他资源 编写拦截器,要实现HandlerInterceptor @Component public class UserI ...

  4. 基于Maven的ssm(spring+springMvc+Mybatis)框架搭建

    前言 本demo是在idea下搭建的maven项目,数据库使用Mysql,jdk版本是1.8.0_171,ideal:2017.3.5 一.新建项目 1.file->new->porjec ...

  5. linux如何查看防火墙是否开启?删除iptables规则

    iptables是linux下的防火墙组件服务,相对于windows防火墙而言拥有更加强大的功能,此经验咗嚛以centos系统为例.关于iptables的一般常见操作,怎么来判断linux系统是否启用 ...

  6. requests 返回 521

    网页端抓数据免不了要跟JavaScript打交道,尤其是JS代码有混淆,对cookie做了手脚.找到cookie生成的地方要费一点时间. 那天碰到这样一个网页,用浏览器打开很正常.然而用request ...

  7. JVM 内存模型及垃圾回收

    java内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 程序计数器:程序计数器是指CPU中的寄存器,它保存的是程序当前执行的指令的地址(也可以说 ...

  8. java-day07

    API 应用程序编程接口 Scanner类 将键盘输入的数据到程序中 1.导包 2.创建 Scanner 对象名 = new Scanner(); 3.使用 int num = 对象名.nextInt ...

  9. 论文阅读-(CVPR 2017) Kernel Pooling for Convolutional Neural Networks

    在这篇论文中,作者提出了一种更加通用的池化框架,以核函数的形式捕捉特征之间的高阶信息.同时也证明了使用无参数化的紧致清晰特征映射,以指定阶形式逼近核函数,例如高斯核函数.本文提出的核函数池化可以和CN ...

  10. axios解决调用后端接口跨域问题

    vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyT ...