安卓4.0下rem显示不正常的问题
在项目中使用了rem为单位,结果在Oppo和4.0下某些浏览器rem工作不正常,font-size计算出来的px总是大于预期的值,因此加了个Hack
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
correctPx()
};
// 校正
function correctPx(){
var docEl = document.documentElement;
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var div = document.createElement('div');
div.style.width = '1.4rem';
div.style.height = '0';
document.body.appendChild(div);
var ideal = 140 * clientWidth / 320;
var rmd = (div.clientWidth / ideal);
if(rmd >1.2)
docEl.style.fontSize = 100 * (clientWidth / 320)/ rmd + 'px';
document.body.removeChild(div);
}
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
安卓4.0下rem显示不正常的问题的更多相关文章
- Google Nexus5在linux下刷原生安卓 android6.0
之前将Nexus5刷成了MIUI系统,现在想体验一下安卓6.0,网上都是windows的教程,但如何在linux下刷机呢? 首先准备环境和工具: 1. 我的linux系统是lubuntu 15.10 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 还在期待安卓9.0吗?Android 10.0要来了
目前,美国 Google公司的 AndroidP (安卓9.0),已经正式全面推出有几个多月了.众多手机品牌厂商也都在积极的进行更新适配 Android 9.0 系统(修改UI界面也算是二次开发,嗯) ...
- 关于安卓6.0权限申请 PermissionDog
最近在一家公司实习,项目中需要用到适配安卓6.0以上的系统,我本来是想用其他人已经写好的权限申请框架来实现的,但是发现跟我的需求有点小区别,所以就自己写了一个 这个权限申请的帮助类很小,只有一个jav ...
- JFreechart在linux下不显示及中文乱码问题
一.使用JFreeChart建的报表,在window下能正常显示,但是放到linux下就报错,而且有时候会把tomcat挂掉, 原因是jfreechart的在linux系统中需要访问java awt库 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- Discuz 7.0版块横排显示版块图标和版块简介的方法
Discuz 7.0版块横排显示版块图标和版块简介的方法 最近很多朋友咨询Discuz论坛设置论坛版块横排后,如何设置显示版块图标和简介的问题. 一.显示板块图标 找到templates\defaul ...
- JQuery 简单的文字超出部分隐藏下拉显示
HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...
- qt如何实现一个渐隐窗口呢(开启的时候他是从上往下渐渐显示)
qt如何实现一个渐隐窗口呢?就是比如说开启的时候他是从上往下渐渐显示的,关闭的时候从下往上渐渐小时的http://stackoverflow.com/questions/19087822/how-to ...
随机推荐
- solr 范围查询
[]表示查询一个包括边界范围, {}表示查询一个不包括边界范围 A TO * 表示没有上界即>=A或是>A ,视使用的是[]还是{}而定 * TO A 表示没有下界即<=A或是< ...
- [Java] String.Split 方法的6个重载函数
String.Split 方法有6个重载函数: 程序代码 1) public string[] Split(params char[] separator) 2) public string[] Sp ...
- nodejs的mysql模块学习(五)数据库连接配置之SSL
SSL选项 在SSL连接选项中需要一个字符串 或者对象 当是字符串的时候 将使用预定义的SSL配置文件 "Amazon RDS" 只有这一个预定义配置文件 用来连接到亚马逊RDS服 ...
- Android 高级UI设计笔记22:Android 指示引导页(带圆点)
1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页 ...
- mysql数据类型分析
CHAR, VARCHAR, TEXT CHAR 定长字符串,占用空间大,速度快 VARCHAR 变长字符串,占用空间小,速度慢 CHAR后面的空格会被去掉,VARCHAR不会去掉 TEXT 不能有默 ...
- http请求数据
/// <summary> /// http请求post数据 /// </summary> /// <param name=&q ...
- Java操作XML的工具类
import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.Inp ...
- codeforces 590B B. Chip 'n Dale Rescue Rangers(二分+计算几何)
题目链接: B. Chip 'n Dale Rescue Rangers time limit per test 1 second memory limit per test 256 megabyte ...
- CF 322E - Ciel the Commander 树的点分治
树链剖分可以看成是树的边分治,什么是点分治呢? CF322E - Ciel the Commander 题目:给出一棵树,对于每个节点有一个等级(A-Z,A最高),如果两个不同的节点有相同等级的父节点 ...
- 关于CSS的只言片语
这段时间做了一个简单的页面,借机又重温了一下CSS的相关知识,现总结一下: 工欲善其事必先利其器,让我们先做一点准备工作 1.在页面添加: <meta http-equiv="x-ua ...