Обнаружение Ориентация и изменение классов

Question

Я создал свою веб-страницу, чтобы она могла адаптироваться к различным браузерам, устройствам и размерам. Однако у меня есть проблема, которую я хочу исправить с помощью JavaScript:

У меня есть два класса для моего заголовка: .header и .header2

Если устройство менее +679 широкий (так, скорее всего, мобильный) Я хочу это использовать .header1 или же я хочу, чтобы использовать .header

Однако если мобильное устройство повернуто альбомного я хочу вернуться к использованию .header

Я хочу это, потому что, когда я использую .header1 размер заголовка увеличивается, чтобы упростить доступ к ссылкам навигации. Однако, когда телефон продолжает использовать пейзаж .header1, заголовок занимает слишком много места на экране.

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

(я также должен был изменить размер и некоторые другие вещи для того, чтобы корректно работать не только заголовок)

Это был мой код, он работал, когда тестирование на моем мобильный, он правильно использовал заголовок2, будучи меньше 679, и когда я поворачивал ландшафт устройства, он делал заголовок возвратом к использованию .header. Однако проблема заключается в том, что если бы я остался в ландшафте и перезагрузил страницу, он вернется назад к использованию .header2, и заголовок занял бы слишком много места. Это действительно озадачило меня, поскольку я не могу полностью понять, что происходит, я думаю, что я запутался в чем-то, что должно быть довольно простым.

Спасибо за помощь.

Answer 1

Это решается проблема совершенно! StyleHomeP имел заголовок 160px StyleHomeL имел заголовок 80px Он обновлялся всякий раз, когда я поворачивал устройство, чтобы переключиться на правильную ориентацию. Кажется, это работает, видя, что ширина больше, чем высота (пейзаж), поэтому она также отлично работает на рабочем столе.