javascript - 检测方向并更改类(class)

我建立了我的网页，以便它可以适应不同的浏览器，设备和大小。但是我有一个要使用JavaScript修复的问题：

我的标头有两个类：.header和.header2

如果设备的宽度小于679（那么很可能是移动设备），我希望它使用.header1，否则我希望它使用.header

但是，如果将移动设备旋转为横向，我希望它返回使用.header

我想要这个是因为当我使用.header1时，标题的大小增加了，从而使访问导航链接更加容易。但是，当电话处于横向时，继续使用.header1意味着标题占用了屏幕上太多的空间。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script type="text/javascript">
  		<!--If screen width is below 679 (Mobile Device) changes classes to enlargen header-->
  		if (screen.width < screen.height) {
			document.getElementById("HeaderId").className = "Header2";
			document.getElementById("BanImgId").className = "BanImg2";
			document.getElementById("LinksId").className = "Links2";
			document.getElementById("MainId").className = "Main2";
  		}
		<!-- Reloads webpage on mobile devices if orientated to return header to default, if rotated back reloads page-->
		$(window).on("orientationchange",function(){
			if(window.orientation == 0)
			{
				location.reload();
			}
			else
			{
				document.getElementById("HeaderId").className = "Header";
				document.getElementById("BanImgId").className = "BanImg";
				document.getElementById("LinksId").className = "Links";
				document.getElementById("MainId").className = "Main";
			}
		});
	</script>

（我还必须调整其他一些大小才能使其正常工作，而不仅仅是标题）

这是我的代码，可以正常工作，在手机上进行测试时，它确实使用了小于679的header2，并且当我旋转设备风景时，确实使标题恢复为使用.header。但是，问题在于我呆在风景中，重新加载了要使用.header2返回的页面，页眉占用了太多空间。当我无法弄清楚发生了什么时，这确实让我感到困惑，我想我把一些本来应该很简单的事情弄得一团糟。

谢谢您的帮助。

最佳答案

这完美地解决了问题！
StyleHomeP的标头为160px
StyleHomeL标头为80px
每当我旋转设备以切换到正确的方向时，它都会更新。通过查看宽度是否大于高度（横向）似乎可以工作，因此它在桌面上也能很好地工作。