子曰:在实践中学习
今天测试同事说,app 中的h5 页面在Mate Pro 10 中出现错误,不能够占满全屏,只占据了90% 的宽度。
这是一个大bug 啊!
开始进行了排查是否是代码问题?rem 的问题?webview 的问题?最后在网络上检索到是参考文档中的内容。
这里记录了解决方案。
我们在开发hybrid 应用时,h5 页面的使用rem 进行适配,设计师给出750px 宽度的设计图,在750px 设计图上进行开发。
通常在适配时,都是在<head>
标签中加载一段<script>
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
!(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。
下面代码就可以解决这个问题了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
|
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 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
|
function rem(designCSSWidth, baseFontSize, maxScale){ designCSSWidth = designCSSWidth || 760; baseFontSize = baseFontSize || 100; maxScale = maxScale || 1.5;
var w = window; var d = document; var on = 'addEventListener'; var html = d.documentElement; var maxSize = maxScale * baseFontSize; var remStyle = d.getElementById('rem-style'); function setRem() { var isVertical = w.innerWidth < w.innerHeight; var width = w.innerWidth; if (!isVertical) { width = 375; remStyle.innerText = 'body { max-width: ' + width + 'px}'; } else { remStyle.innerText = ''; } var size = baseFontSize * width / designCSSWidth; html.style.fontSize = Math.min(size, maxSize) + 'px'; }
var isAnd = w.navigator.userAgent.match(/Android/); var raf = w.requestAnimationFrame || w.webkitRequestAnimationFrame; var limit = 10; function setRemFallback() { limit--; if (limit && w.innerWidth > 500) { raf && raf(setRemFallback) } else { setRem(); d.documentElement.style.display = 'block'; } } if (w.innerWidth > 500 && isAnd) { d.documentElement.style.display = 'none';
if (!raf) { w[on]('load', setRemFallback, false); } else { raf(setRemFallback); } } w[on]('resize', setRem, false); setRem(); } rem(375, 50);
|
参考文档
1.rem布局在webview中页面错乱