Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
Rankin
/
2BTV-Web
3
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Browse Source

:bug: webview默认字体影响rem大小导致页面布局错乱问题

zhanghe 6 years atrás
parent
33c5c62528
commit
1713e45458
2 changed files with 24 additions and 18 deletions
Split View Show Diff Stats
  1. 21 17
      src/stage/index/index.html
  2. 3 1
      src/stage/index/style/LoginScene.less

+ 21 - 17
src/stage/index/index.html
Ver Ficheiro 

@@ -11,24 +11,28 @@
 
 <body>
 
 	<script>
 
 		(function (doc, win) {
 
+			//用原生方法获取用户设置的浏览器的字体大小(兼容ie)
 
+		  if (doc.documentElement.currentStyle) {
 
+		    var user_webset_font = doc.documentElement.currentStyle['fontSize'];
 
+		  }
 
+		  else {
 
+		    var user_webset_font = getComputedStyle(doc.documentElement, false)['fontSize'];
 
+		  }
 
+			//取整后与默认16px的比例系数
 
+		  var xs = parseFloat(user_webset_font) / 16;
 
 			var docEl = doc.documentElement, //根元素html
 
-				//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
 
-				resizeEvt = 'orientationchange' in window ?
 
-					'orientationchange' :
 
-					'resize',
 
-				recalc = function () {
 
-					var clientWidth = docEl.clientWidth;
 
-					if (!clientWidth) {
 
-						return;
 
-					}
 
-					//把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
 
-					docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
 
-					// console.log((120 * (clientWidth / 1920)) * 0.2);
 
-				};
 
-			//alert(docEl)
 
-			if (!doc.addEventListener) {
 
-				return;
 
-			}
 
+			//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
 
+			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 
+			recalc = function () {
 
+				var clientWidth = docEl.clientWidth;
 
+				if (!clientWidth) return;
 
+				if (clientWidth < 1920) {
 
+					docEl.style.fontSize = 100 * (clientWidth / 1920) / xs + 'px';
 
+				} else {
 
+					docEl.style.fontSize = 100 + 'px';
 
+				}
 
+			};
 
+			if (!doc.addEventListener) return;
 
 			win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
 
 			doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间
 
 		})(document, window);

+ 3 - 1
src/stage/index/style/LoginScene.less
Ver Ficheiro 

@@ -53,7 +53,8 @@
 
 
 				& > input {
 
 					width: 100%;
 
-					height: 0.7rem;
 
+					height: 100%;
 
+					display: block;
 
 					border: 0;
 
 					line-height: 0.7rem;
 
 					font-size: 0.3rem;
 
@@ -86,6 +87,7 @@
 
 				& > input {
 
 					width: 100%;
 
 					height: 100%;
 
+					display: block;
 
 					border: 0;
 
 					line-height: 0.7rem;
 
 					font-size: 0.3rem;