移动端Web适配单位rem的坑,oppo r9手机出现错位bug
我们做了一个抽奖的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的更多相关文章
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动web适配利器-rem
移动web适配利器-rem 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移 ...
- 国内外移动端web适配屏幕方案
基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...
- 国内外移动端web适配屏幕方案总结
基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS: ...
- 移动端Web适配的两种做法思路总结
看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...
- vue 移动端屏幕适配 使用rem
要想移动端适配 并使用 rem 您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...
- 移动 web 端屏幕适配 - rem
前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...
- 移动端屏幕适配(rem+js)
什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样. 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距.留白,以及 ...
- 那些移动端web踩过的坑
原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...
随机推荐
- duilib教程之duilib入门简明教程13.复杂控件介绍
首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图: 然后将Name属性改成其他名字, 不能是[控件名+UI+数字]这种,因为这是DuiDesigner默认的名字,它不会实际写 ...
- PAT甲级——A1139 First Contact【30】
Unlike in nowadays, the way that boys and girls expressing their feelings of love was quite subtle i ...
- IO初步,字节输入流和字节输出流
字节输出流 OutputStream(基类,抽象) 特点:写任意的文件 方法:写出数据的方法:write write(int b) 写出1个字节 -128~127之间,写的是一个ASCLL码的值 wr ...
- 分享18道Java基础面试笔试题(面试实拍)
上图来自Java技术栈微信群里的群友分享,看起来比较基础,但不一定人人都答得上来. 图片比较模糊,小编把题目进行了文字化. 1.你最常上的两个技术站和最常使用的两个app分別进什么?主要解决你什么需求 ...
- shell脚本练习04
######################################################################### # File Name: -.sh # Author ...
- mac系统升级导致无法在iOS设备中运行Safari Web 调试器
macOS系统升级之后,可能会导致Safari开发选项中没有iOS设备,进而无法运行Safari Web 调试器. 此问题的解决办法: 请转到设置>常规>重置>重置位置和隐私.现在, ...
- 使用Flume+Kafka+SparkStreaming进行实时日志分析
每个公司想要进行数据分析或数据挖掘,收集日志.ETL都是第一步的,今天就讲一下如何实时地(准实时,每分钟分析一次)收集日志,处理日志,把处理后的记录存入Hive中,并附上完整实战代码 1. 整体架构 ...
- nginx 配置文件备份 nginx.conf and vhosts
bogon:vhosts xingchong$ brew services restart nginx Stopping `nginx`... (might take a while) ==> ...
- 【特别篇】NOIP2017划水记
本文是在精分状态下写的.. 逻辑混乱.. 记忆模糊.. 如果有不符合事实的地方欢迎各位当事人拿出证据指正.. 可能会很啰嗦 很矫情 很zz 不过不要对本蒟蒻进行人身攻击 武力威胁 他还是个宝宝(大雾) ...
- vue 简单留言本
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...