移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式
这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形。所以在次我们就用到了rem,使用rem为单位,在任何移动端下显示的效果都是一样的。
只要我们在页面的head中引入下面的 rem.js :
! function(n) {
var e = n.document,
t = e.documentElement,
i = 750,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 750 && (n = 750);
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
上面的一段rem.js代码在一般情况下都是没有问题,但是如果遇到了某些设备设置了大字体模式(老人机模式,哈哈),页面的显示效果就会变形,所以根据这一情况,经过完善后的rem.js 如下:
;(function(win) {
var docEl = win.document.documentElement,
tid; function refreshRem() {
var width = docEl.getBoundingClientRect().width;
var rem = width / 750*100;//以750px为原稿,除以100可得各元素的rem
docEl.style.fontSize = rem + "px";
var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem) {
var remScaled = rem / ( actualSize / rem );
docEl.style.fontSize = remScaled + "px"
}
} function dbcRefresh() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 100)
} win.addEventListener("resize", function() { dbcRefresh() }, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { dbcRefresh() }
}, false);
refreshRem();
})(window);
上面的rem.js 都是根据750px设计的,100px = 1rem
移动端适配rem为单位的rem.js及个别设备设置了大字体模式,导致页面变形的处理方式的更多相关文章
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配(rem单位定义方法)
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 浅谈移动端适配-rem
对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
随机推荐
- 2020 Plan
1. English IELTS 7.0 IELTS word 3271, 10 words diff 2 Grammar framework IELTS writing Friends foll ...
- 3.Docker 操作镜像
获取镜像 之前提到过,Docker Hub 上有大量的高质量的镜像可以用,这里我们就说一下怎么获取这些镜像. 从 Docker 镜像仓库获取镜像的命令是 docker pull.其命令格式为: doc ...
- javax.naming.NameNotFoundException: Name jdbc is not bound in this Context
这个错误的原因是没有项目使用到了Tomcat中配置的数据源(但是你本地没有配置),关于什么是JNDI看这篇文章就够了® 今天导入一个项目(比较老的),在本地运行时报错: Cannot resolve ...
- SimpleDateFormat中YYYYmmDDhhMMss大小写问题-获取不到正确时间以及常见的格式串
1.问题解决: SimpleDateFormat sf = new SimpleDateFormat("YYYYmmDDhhMMss");String transTime = &q ...
- CTF——代码审计之变量覆盖漏洞writeup【2】
题目: 基础: 所需基础知识见变量覆盖漏洞[1] 分析: 现在的$a=’hi’,而下面的函数需满足$a=’jaivy’才可以输出flag,那么需要做的事就是想办法覆盖掉$a原来的值. 那么出现的提示 ...
- LINUX使用SSH远程终端时,如何将运行时间长的程序在后台挂起,下次SSH登陆时继续使用同一个SHELL?
我在某个平台上购买了一个云服务器,LINUX操作系统无图形化界面,硬盘空间较小.虽然在平台上可以通过其自带网页版VNC界面登陆SHELL进而操控云主机,但是每次需要操控都得打开网页登陆进平台,然后再进 ...
- mysql远程链接(可以在服务器上配置然后在本地连接远程服务器)
ps:如果一下的连接不成功原因:一定要关闭windows防火墙或者linux的防火墙 1.在服务器端授权(黄色标记的地方第一个是用户名,第二个的意思是可以远程连接,第三个是密码) GRANT ALL ...
- cookie和会话
一.为什么要使用cookie和会话 HTTP是一种无状态技术,这意味着每个单独的HTNML页面都是一个无关的.当人们穿过站点时,HTTP 没有用于跟踪用户或保持变量的方法,尽管浏览器会跟踪你访问过的页 ...
- repeater列表中直接修改状态
<asp:Repeater ID="RepeaterArticleList" runat="server" onitemdatabound="R ...
- 在SQL2005中修改数据库名称
SQL Server 2005中有个数据库HT_WisdomDataBaseCenter,现在要将其改名为HT_NBSBOneNetcs1步骤:(1) 分离数据库:打开management studi ...