Question

我构建了自己的网页，以便能够适应不同的浏览器，设备和尺寸。但是我有一个问题，我想用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>

（我还必须重新调整其他一些东西以使其正常工作而不仅仅是标题）

这是我的代码，它工作，当我在我的手机上测试时，它确实正确使用了header2，小于679当我旋转设备格局时它确实使标题返回使用.header然而它的问题是因为如果我留在横向并重新加载页面，它将返回使用.header2并且标题会占用太多空间。它真的让我感到困惑，因为我无法解决最新情况，我认为我弄得一团糟应该很简单。

感谢您的帮助。

Answer 1

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

检测方向和改变班级

1 个答案: