szy_material/App.vue

<script>
	export default {
		onLaunch: function() {
			this.fontSizeSetting()
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			fontSizeSetting() {
				window.onload = function() {
					setAndroidFontsize();
					htmlFontSize()
				}
				window.onresize = function() {
					setAndroidFontsize();
					htmlFontSize()
				}
				// 安卓解决微信浏览器字体被调大导致页面错乱的办法
				function setAndroidFontsize() {
					if (typeof window.WeixinJSBridge == "object" && typeof window.WeixinJSBridge.invoke == "function") {
						handleFontSize();
					} else {
						if (document.addEventListener) {
							document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
						} else if (document.attachEvent) {
							document.attachEvent("WeixinJSBridgeReady", handleFontSize);
							document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
						}
					}
				}
				function handleFontSize() {
					window.WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
					window.WeixinJSBridge.on('menu:setfont', function() {
						window.WeixinJSBridge.invoke('setFontSizeCallback', {
							'fontSize': 0
						});
					});
				}
		
				function htmlFontSize() {
					var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
					var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
					var width = w > h ? h : w;
					width = width > 720 ? 720 : width
					var fz = ~~(width / 15)
					document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
					var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace(
							'px', '') *
						10000) / 10000
					if (fz !== realfz) {
						document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
	/*每个页面公共css */
	page {
		font-size: 28rpx;
		color: #333;
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.flexC {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.flexS {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.u-checkbox__icon-wrap {
		margin: 0 !important;
	}
	.uni-system-preview-image {
		background-color: #fff !important;
	}
</style>