移动端和PC端页面的判断

在我们开发过程中，经常会遇到移动端和pc端共用一个页面，故我在这里会写一个移动端和pc端的判断，让其走不同的链接；

第一种网络资源：

window.onload = function(){
		//移动端走移动路径，pc走pc路径；
		var app =  navigator.platform;
		
		var system ={
			win : false,
			mac : false,
			xll : false
		};
	//检测平台
	var p = navigator.platform;
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
	//跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面
	if(system.win||system.mac||system.xll){
		console.log('走了pc端');
		
	}
	else{
	   var url = window.location.href;
	   var newUrl = window.location.origin+'/petProtectOne/petPhone/petImg.html'
	   window.location.href = newUrl;
	}
}

在location种存在origin这个属性值，获取url种协议域名端口号等，然后就可以链接走你想要的路径；走不同的路径还可以通过正则来判断，改写路径：

            var url =  window.location.href;
	    var reg = /\/{1}[a-zA-Z]+\.html$/
	    console.log(url.match(reg)[0]);
	    var newUrl =  url.replace(/\/{1}[a-zA-Z]+\.html$/,'/petPhone/petImg.html');

其实通过正则匹配在生产线上获取到的通过正则匹配的路径，并不会改变且通过match匹配路径为null值，所以在本地测试是可行，因为是没有网络端口而已，网络端口解析域名产生的问题；

第二种：通过正则判断移动端和pc端，加上navigator对象判断

    //通过navigator加正则判断区别手机端和pc端；
	   var reg = /([a-zA-Z]+)?([a-zA-Z]+.*\;\s([a-zA-Z0-9]+)?)/
	   var newNav = navigator.appVersion.match(reg);
	   if(newNav){
	   	 var nav = newNav[0];
	   	 var navArr = nav.split(/(\s)|((\s\d\.\d)?\;)/);
	   	 var flag = false;
	   	 for(var i = 0,len=navArr.length;i<len;i++){
	   	 	if (navArr[i]=='Android'||navArr[i]=='iPhone'||navArr[i]=='iPad'||navArr[i]=='MeeGo'||navArr[i]=='NokiaN9'||navArr[i]=='NOKIA') {
	   	 		flag = true;
	   	 		break;
	   	 	}
	   	 	
	   	 }
	   	 if (flag) {
	   	 	console.log('我用了手机');
	   	 }
	   	 else{
	   	 	console.log('我用了pc端');
	   	 }
	   }

通过手机端和移动端展示不同样式，我完全可以按照理论值，动态创建样式表进行链接，这个就不做示列，大家可以私下里去尝试，不过创建url链接才是最可靠的方式

移动端和PC端页面的判断

猜你喜欢