移动端rem布局

最新推荐文章于 2024-01-30 22:59:15 发布

此用户已成仙

最新推荐文章于 2024-01-30 22:59:15 发布

阅读量250

点赞数

分类专栏：技术小白文章标签： rem布局移动端适配移动端rem rem webview

本文链接：https://blog.csdn.net/jch923798729/article/details/88100347

版权

技术小白专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在使用rem移动端布局的时候，发现，使用浏览器，微信浏览器，还有其他浏览器打开做的H5页面的时候，兼容性和适配都是可以的，然而，使用安卓和ios的webview打开的时候，发现没有适配（这个页面变得超大），经过查资料，是因为app的字体大小和其他浏览器的不一样，导致，rem的计算出现问题，然后又经过百度，用了另一种计算rem的js，解决问题。

<script type="text/javascript">
			function adapt(designWidth, rem2px){
			    var d = window.document.createElement('div');
			    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);
		</script>