(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 640) { // 最大宽度
width = 640;
}
var rem = width / 10; // 将屏幕宽度分成10份, 1份为1rem
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
console.log(docEl.style.fontSize)
})(window);

移动端rem设置(部分安卓机型不兼容)的更多相关文章

  1. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  2. 移动端rem设置,自动更改html<font-size>

    <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...

  3. 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

  4. H5页面适配所有iPhone和安卓机型的六个技巧

    http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...

  5. 移动端开发ios和安卓兼容问题

    移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...

  6. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  7. 部分安卓机型1px边框无法显示解决方法

    实践发现css样式中使用1px solid 在部分安卓机型无法显示. 网上找到解决方案:使用行内样式设置边框.

  8. 第130天:移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  9. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. eslint推荐编码规范和airbnb推荐编码规范

    Eslint规范 for 循环禁止使用无限循环(这个非默认推荐) // bad for (var i = 0; i < 10; i--) { } for (var i = 10; i >= ...

  2. vue遇到的大坑,h5在ios10版本下不能打开页面

    无论是谁,在做事情的过程中总是会遇到学坑,才能成为最后的大神 这个坑不说了,找了半天.希望能帮助到你们 进入build文件夹: 找到webpack.prod.conf.js文件: 在UglifyPlu ...

  3. wx小程序开发 1:小程序代码构成

    官网学习地址:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/introduction.html 1: 2:待续.. ...

  4. php第十节课

    数据访问 面向对象:类:由众多对象抽象出来的对象:由类实例化出来的,任何东西都可以看做对象来研究定义类:class 类名{ 成员变量 成员方法} 构造函数:写法特殊 执行特殊,对类里面的成员进行初始化 ...

  5. Python实现8中常用排序算法

    L = [2,6,4,7,9,1,3,5,8] # 1.插入排序 def insert_sort(List): n = len(List) for i in range(1,n): # 得到索引 j ...

  6. AtCoder ARC 082E - ConvexScore

    传送门:http://arc082.contest.atcoder.jp/tasks/arc082_c 本题是一个平面几何问题. 在平面直角坐标系中有一个n元点集U={Ai(xi,yi)|1≤i≤n} ...

  7. Codeforces 919D Substring (拓扑图DP)

    手动博客搬家: 本文发表于20180716 10:53:12, 原地址https://blog.csdn.net/suncongbo/article/details/81061500 给定一个\(n\ ...

  8. docker 容器操作( 以 tomcat 为例 )

    一.容器操作 一个镜像可以启动多个容器.比如一个 tomcat 镜像,可以启动多个tomcat 容器,启动后的这些 tomcat 都是各自独立的 二.步骤 1.搜索镜像 [root@localhost ...

  9. [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉

    本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia [SDOI2008]沙拉公主的困惑 线性筛 素数+欧拉 题目大意 给定n,m,求在1到n!内与m!互质的 ...

  10. 【ACM】nyoj_143_第几是谁_201308071558

    第几是谁?时间限制:3000 ms  |  内存限制:65535 KB 难度:3描述 现在有"abcdefghijkl”12个字符,将其按字典序排列,如果给出任意一种排列,我们能说出这个排列 ...