移动端rem设置(部分安卓机型不兼容)
(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设置(部分安卓机型不兼容)的更多相关文章
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- 移动端rem设置,自动更改html<font-size>
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchang ...
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...
- 移动端开发ios和安卓兼容问题
移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 部分安卓机型1px边框无法显示解决方法
实践发现css样式中使用1px solid 在部分安卓机型无法显示. 网上找到解决方案:使用行内样式设置边框.
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- Git更新代码
此次更新,创建新的文件与文件夹,并且删除了原有文件 通过“git status” 命令查看当前变更.通过变更信息可以看出,删除了test_case.py文件.这个删除只是在项目目录下进行删除,Git对 ...
- BZOJ 1572: [Usaco2009 Open]工作安排Job 贪心 + 堆 + 反悔
Description Farmer John想修理牧场栅栏的某些小段.为此,他需要N(1<=N<=20,000)块特定长度的木板,第i块木板的长度为Li(1<=Li<=50, ...
- luogu P4719 【模板】动态 DP 矩阵乘法 + LCT
方法二:LCT+矩阵乘法 上文中,我们用线段树来维护重链上的各种矩阵转移. 第二种方法是将树链剖分替换为动态树. 我们知道,矩阵乘法 $\begin{bmatrix} F_{u,0} & F_ ...
- PAT_A1152#Google Recruitment
Source: PAT A1152 Google Recruitment (20 分) Description: In July 2004, Google posted on a giant bill ...
- esp32(M5STACK) ARDUINO开发环境搭建(ubuntu)
首先去官网下载arduino https://www.arduino.cc/en/main/software 由于国产链接下载慢的缘故,所以可以采用百度网盘的方式进行下载,具体下载方法 ...
- [luogu3230 HNOI2013] 比赛 (搜索+Hash)
传送门 Solution 搜索加Hash记录状态,记忆化搜索,需要注意顺序无关答案 Code //By Menteur_Hxy #include <map> #include <cm ...
- [luogu4478 BJWC2018] 上学路线 (容斥原理+拓展lucas)
传送门 Description 小B 所在的城市的道路构成了一个方形网格,它的西南角为(0,0),东北角为(N,M). 小B 家住在西南角,学校在东北角.现在有T 个路口进行施工,小B 不能通过这些路 ...
- Python之scrapy linkextractors使用错误
1.环境及版本 python3.7.1+scrapy1.5.1 2.问题及错误代码详情 优先贴上问题代码,如下: import scrapy from scrapy.linkextractors im ...
- Atcoder AGC031B Reversi (DP计数)
简单的计数题.(总算做出一道AGC的B题了,然而这场比赛我忘记打了233333) 题目链接: https://atcoder.jp/contests/agc031/tasks/agc031_b 题意: ...
- 07springMVC视图解析器
u 概述 u 常见视图解析器 u UrlBasedViewResolver u InternalResourceViewResolver u 视图解析器链 u 说明 1 概述 在 ...