PC端手机端自适应方案总结

PC端手机端自适应方案

一、做成两个站，两个域名

方法：
后端判断设备切换，跳转链接
前端JS判断设备切换，跳转链接

缺点：
1.两个域名，不利于SEO优化
2.两个站，代码量大，布局项目繁杂
优点：
1.逻辑清晰，代码简洁

适用场景：
PC端和手机端设计图差别较大时



二、做成一个站，一个域名

方法：

用rem单位加媒体查询的方案，JS判断设备是手机设备时，设置根目录font-size


		function browserRedirect() {
			var sUserAgent = navigator.userAgent.toLowerCase();
			var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
			var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
			var bIsMidp = sUserAgent.match(/midp/i) == "midp";
			var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
			var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
			var bIsAndroid = sUserAgent.match(/android/i) == "android";
			var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
			var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
			if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
				//使用rem
			var clientWidth = document.documentElement.clientWidth;
			if (clientWidth >= 750) {
				document.documentElement.style.fontSize = '100px';
			} else {
					document.documentElement.style.fontSize = clientWidth / 7.5 + "px";
					window.addEventListener("resize",function(){document.documentElement.style.fontSize = innerWidth/7.5  + "px"; },false)
				}
			}
		}
		browserRedirect();

缺点：逻辑比方案一复杂
优点：同一个域名，利于SEO优化，自适应布局
适用场景：
PC端设计图与手机端设计图 差别不大时