移动端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"> ...
随机推荐
- node phantomjs linux 安装问题
本地为macos系统,phantomjs安装一直没问题:后来采用了phantom-pool,增加了连接池,安装也没有问题.这时候不需要安装phantom了,因为phantom-pool是依赖于phan ...
- case when用法小结
case 对比字段 when 值 then 输出结果 when 值 then 输出结果 ....else 输出结果 end 对比字段可以不在case后面确定 可以把条件直接写在when后面,如果对比字 ...
- Git 基础教程 之 分支管理及策略
创建一个属于自己的分支,别人看不到,你在你自己的分支上干活, 想提交就提交,直至开发完毕后,再一次性合并到原来分支上.这样,既安全,又不影响他人工作. 在实际的开发过程中,应照几个基 ...
- 《奋斗吧!菜鸟》 第八次作业:Alpha冲刺 Scrum meeting 1
项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...
- phpstrom 汉化
-- ---------- _--------------------------------------------------- ------------------- ----- ------- ...
- QT5.4.1在ARM开发板上不能显示汉字
在linux下正常的程序,移植到ARM上,中文不能显示.网上好多介绍,一头雾水.查看其中话题是关于中文显示的(http://www.qtcn.org/bbs/simple/?t55852.html). ...
- lucene_06_solr域
solr域在家目录下面\solr_home\collection1\conf中的schema.xml里面定义. 域必须要先在schema.xml下定义后才能使用. solr在操作Field域时需要在s ...
- Office办公软件各版本下载(一键安装)
史上最快最全的Office套件,含Word.PPT.Excel.Access.Outlook完整组件(微软官方版本). 推荐安装Office2010版本!一键完成清理.安装Office.自动激活. 图 ...
- Spring Boot项目@RestController使用重定向redirect
Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可.而Spring Boot使用了@RestControll ...
- Kafka中文文档学习笔记
文档位置: /Users/baidu/Documents/Data/Interview/机器学习-数据挖掘/Kafka 据说是目前见到的最好的 Kafka 中文文章 . Kafka 是一个消息系统,原 ...