移动端适配方案

话不多说，直接上代码

		// rem适配 优点，使用了完美视口 ，缺点：px转rem计算麻烦
		(function(){
			var html = document.querySelector('html')
			html.style.fontSize = document.documentElement.clientWidth/16 + 'px'
		})()		

		// viewport适配 缺点：没有使用完美视口，优点：所见即所得
		// 将所有设备布局视口调整为设计稿尺寸
		const targetW = 750;	//根据设计稿大小做调整
		// const scale = window.screen.width / targetW;
		const scale = document.documentElement.clientWidth / targetW
		const viewport = document.querySelector('meta[name="viewport"]');
		viewport.setAttribute('content', 'user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

		// 物理像素
		//淘宝适配方案，1物理像素
		//方案2 ，css缩放
		;(function(){
			const dpr = window.devicePixelRatio||1
			var html = document.querySelector('html')
			html.style.fontSize = document.documentElement.clientWidth*dpr/16 + 'px'
			
			var scale = 1/dpr;
			const viewport = document.querySelector('meta[name="viewport"]');
			viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);
		})()