JS根据屏幕宽度跳转不同页面

来源：1-1 移动端屏幕适配介绍

localhost999

2021-06-07 14:26:03

老师我想实现一个网站（同一个网站设计了三个不同的界面，分别是PC端、手机端、平板端），根据当前访问设备的屏幕宽度来自动跳转到3个相应的适配网站，但是我的代码使用手机访问的时候会跳转到平板页面，请问老师是哪里有问题啊，怎么修改呢

代码：

<!DOCTYPE html>
<html>

	<head>
		<title></title>
	</head>

	<body>
		<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
			var winWidth = 0;

			function findDimensions() //函数：获取尺寸
			{
				//获取窗口宽度
				if(window.innerWidth)
					winWidth = window.innerWidth;
				else if((document.body) && (document.body.clientWidth))
					winWidth = document.body.clientWidth;

				//通过深入Document内部对body进行检测，获取窗口大小
				if(document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {

					winWidth = document.documentElement.clientWidth;
				}
				if(winWidth >= 0&&winWidth <= 320){
					window.location.href = "./mobile/index.html";
				}
				else if(winWidth > 320&&winWidth <= 480){
					window.location.href = "./mobile/index.html";
				}
				else if(winWidth > 480&&winWidth <= 720){
					window.location.href = "./mobile/index.html";
				}
				else if(winWidth > 720&&winWidth <= 768){
					window.location.href = "./mobile/index.html";
				}
				else if(winWidth > 768&&winWidth < 1024){
					window.location.href = "./pad/index.html";
				}
				else if(winWidth >= 1024){
					window.location.href = "./pc/index.html";
				}
				else {
					window.location.href = "./pc/index.html";

				}
			}
			findDimensions();
			//调用函数，获取数值
			window.onresize = findDimensions;
			//-->
</script>

	</body>

</html>