一日一练-JS rem布局在webview 中错乱

子曰：在实践中学习

今天测试同事说，app 中的h5 页面在Mate Pro 10 中出现错误，不能够占满全屏，只占据了90% 的宽度。
这是一个大bug 啊！

开始进行了排查是否是代码问题？rem 的问题？webview 的问题？最后在网络上检索到是参考文档中的内容。
这里记录了解决方案。

我们在开发hybrid 应用时，h5 页面的使用rem 进行适配，设计师给出750px 宽度的设计图，在750px 设计图上进行开发。
通常在适配时，都是在<head> 标签中加载一段<script> 代码：

123456789101112131415
 
!(function (doc, win) {  var docEl = doc.documentElement,  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  recalc = function () {    var clientWidth = docEl.clientWidth    if (!clientWidth) return    if (clientWidth > 750) {      clientWidth = 750    }    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'  }  recalc()  if (!doc.addEventListener) return  win.addEventListener(resizeEvt, recalc, false)})(document, window)

上述代码使得1rem=100px 这样就可以开发了。

但是这在有些Android 手机上（这里的Mate 10 Pro），浏览器或 webview 的默认字体是随着系统设置的字体改变的。这样就会导致默认字体大于或小于 16px导致上述bug。
下面代码就可以解决这个问题了：

12345678910111213141516171819202122232425262728293031
 
// designWidth 设计稿的宽度// rem2px 设计稿宽度下,1rem的宽度function (designWidth, rem2px){  var d = window.document.createElement('p')  d.style.width = '1rem'  d.style.display = "none"  var head = window.document.getElementsByTagName('head')[0]  head.appendChild(d)  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'))  return defaultFontSize}!(function(doc, win, designWidth, rem2px) {  var docEl = doc.documentElement,    defaultFontSize = adapt(designWidth, rem2px),    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    recalc = function() {      var clientWidth = win.innerWidth ||        doc.documentElement.clientWidth ||        doc.body.clientWidth      if (!clientWidth) return      if (clientWidth < 750) {        docEl.style.fontSize = clientWidth / designWidth * rem2px / defaultFontSize * 100 + '%'      } else {        docEl.style.fontSize = '625%'      }    }  if (!doc.addEventListener) return  win.addEventListener(resizeEvt, recalc, false)  doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window, 750, 100)

猫眼的rem 适配方法

1
大专栏  一日一练-JS rem布局在webview 中错乱pan class="line">2
				


				
时间： 2024-07-29 22:55:52 

		

		


	
	
	

		


		
一日一练-JS rem布局在webview 中错乱的相关文章


								

		

			

                rem布局在react中的应用
			

		

		

									

				摘要: 前面给大家分享了一个react项目(http://www.cnblogs.com/xiyangbaixue/p/4751904.html),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化. 项目代码,欢迎fork和star,在线预览 REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&			

		

	

				

		

			

                一日一练-JS toString 和valueOf 方法的联系与区别
			

		

		

									

				子曰:类型转换中toString 和valueOf 的联系与区别分析 首先是看看ES5 的规范是如何进行说明的 在这里有几个基础知识点需要了解一下: [[Class]] [[Class]] 属于Object 的内部属性,值的类型返回为String,其作用是,说明规范定义的对象分类的一个字符串值. ES5 规范的每种内置对象都定义了[[Class]] 内部属性值.宿主对象的[[Class]] 内部属性值可以是除了"Arguments". "Array". "			

		

	

				

		

			

                一日一练-JS 了解几种跨域技术
			

		

		

									

				子曰:了解几种跨域机制 简单介绍 首先简单了解一下同源策略相关知识点: 1.同源策略 限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要机制. 2.源的定义:如果两个页面的协议.端口和域名都相同,则两个页面具有相同的 源 3.同源策略规定,是XHR 实现Ajax 通信的一个主要限制.默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源.这种安全策略可以预防某些恶意行为.但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的.			

		

	

				

		

			

                WebView用法与JS交互(2) 响应webview中的图片点击事件
			

		

		

									

				参考:http://blog.csdn.net/wangtingshuai/article/details/8635787 js代码 // 注入js函数监听 private void addImageClickListner() { // 这段js函数的功能就是,遍历所有的img几点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去 contentWebView.loadUrl("javascript:(function(){" + "			

		

	

				

		

			

                70.JS---利用原生js做手机端网页自适应解决方案rem布局
			

		

		

									

				利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s			

		

	

				

		

			

                一看就懂得移动端rem布局、rem如何换算
			

		

		

									

				这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi			

		

	

				

		

			

                移动端rem布局背景图片使用以及sprite雪碧图
			

		

		

									

				现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终			

		

	

				

		

			

                移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
			

		

		

									

				先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转			

		

	

				

		

			

                欲练JS，必先攻CSS——前端修行之路
			

		

		

									

				今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的.毕业设计自己一个人做了一个全栈的web,做完整个毕业设计后,我就决定出来要做前端