Skrypt JS dostosowujący pionowe menu do urządzę mobilnych zawiesza stronę

Stworzyłem na stronie pionowe menu w elemencie nav o wysokości 266px w tym padding 5px z każdej strony. Menu to lista wypunktowana ul. Zauważyłem, iż na tabletach i smartfonach to menu nie zajmuje całego nav, więc utworzyłem skrypt, który oblicza wysokość ul i dostosowuje czcionkę, aby ul zajmował cały nav. Oto on

 var wysokoscNawigacji, wysokoscMenu, szerokoscStrony, wysokoscStrony, rozdzielczoscStrony, czcionkaListyMenu, i, dopelnienieGorne, zmianaTla=zmianaTlaDuze=zmianaTlaWielkie=false, odstep=10, pierwszy=true, wysokoscMenuStare;
window.onload=aktualneDane;
function WysokoscMenu()
{	
	var nawigacja=document.getElementById("nawigacja"), listaMenu=document.getElementsByClassName("menuLink"), menu=document.getElementById("listaMenu");
	szerokoscStrony=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	wysokoscStrony=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
	wysokoscNawigacji=nawigacja.offsetHeight;
	wysokoscNawigacji-=odstep;
	wysokoscMenu=menu.offsetHeight;

	if((document.getElementById("listaMenu").offsetHeight!=wysokoscMenuStare)||(pierwszy==true)) {
		if(wysokoscMenu>wysokoscNawigacji) {
			czcionkaListyMenu=listaMenu[0].style.fontSize.replace("pt", "");			
			while(wysokoscMenu>wysokoscNawigacji) {
				czcionkaListyMenu--;
				for(i=0;i<listaMenu.length;i++) {
					listaMenu[i].style.fontSize=""+czcionkaListyMenu+"pt";
				}
				wysokoscMenu=menu.offsetHeight;
			}
			dopelnienieGorne=Math.floor((wysokoscNawigacji-wysokoscMenu)/2);
			menu.style.paddingTop=""+dopelnienieGorne+"px";
		}
		else if(wysokoscMenu<wysokoscNawigacji) {
			czcionkaListyMenu=listaMenu[0].style.fontSize.replace("pt", "");
			while(wysokoscMenu<wysokoscNawigacji) {
				czcionkaListyMenu++;
				for(i=0;i<listaMenu.length;i++) {
					listaMenu[i].style.fontSize=""+czcionkaListyMenu+"pt";
				}
				wysokoscMenu=menu.offsetHeight;
				if(wysokoscMenu>wysokoscNawigacji) {
					czcionkaListyMenu--;
					for(i=0;i<listaMenu.length;i++) {
						listaMenu[i].style.fontSize=""+czcionkaListyMenu+"pt";
					}
					break;
				}
			}
			dopelnienieGorne=Math.floor((wysokoscNawigacji-wysokoscMenu)/2);
			menu.style.paddingTop=""+dopelnienieGorne+"px";
		}
		else {
			;
		}
		pierwszy=false;
		wysokoscMenu=menu.offsetHeight;
		wysokoscMenuStare=wysokoscMenu;
	}
		
	if(szerokoscStrony>wysokoscStrony) {
		rozdzielczoscStrony=szerokoscStrony;
	}
	else {
		rozdzielczoscStrony=wysokoscStrony;
	}
	
	if(rozdzielczoscStrony>3000&&zmianaTlaWielkie==false) {
		document.body.style.backgroundImage='url("kolory/tlo2_wielkie.jpg")';
		zmianaTlaWielkie=true;
		zmianaTla=zmianaTlaDuze=false;		
	}
	else if(rozdzielczoscStrony<3000&&rozdzielczoscStrony>1700&&zmianaTlaDuze==false) {
		document.body.style.backgroundImage='url("kolory/tlo2_duze.jpg")';
		zmianaTlaDuze=true;
		zmianaTla=zmianaTlaWielkie=false
	}
	else if(rozdzielczoscStrony<1700&&rozdzielczoscStrony>1435&&zmianaTla==false) {
		document.body.style.backgroundImage='url("kolory/tlo2.jpg")';
		zmianaTla=true;
		zmianaTlaDuze=zmianaTlaWielkie=false;
	}
	else {
		;
	}
}

function aktualneDane() {
	window.setInterval(WysokoscMenu, 4500);
}

Skrypt też ma za zadanie zmienić tło strony w zależność od rozdzielczość. Co 4.5 sekundy wysokość ul i tło jest sprawdzane i w razie potrzeby zmieniane. U mnie we wszystkich przeglądarkach działa, ale u innych skrypt zawiesza tę stronę i pozostałe otwarte karty. Gdzie zrobiłem błąd?

A czy nie prościej to zrobić za pomocą media queries?

Robiłerm tak, ale każda przeglądarka na tabletach ma inną rozdzielczość strony - np. w klasycznej Androida potrzeba 19pt a w mobilnej Operze 13pt a jak się powiększa stronę trzaba jeszcze inną

Moim zdaniem to używasz jakiejś jednostki z du*y. Pt to 1/72 cala i stosuje się to do druku, a nie na stronie. Poza tym jeżeli Twój design rozlatuje się przez 1 px i musisz takie cuda robić, to znaczy że problem jest gdzieś indziej. Jak już chcesz się tak bawić to myślę, że da się ten twój kod troche posprzątac, bo tam nic nie widać :P

// sprawdza czy numer jest w podanym przedziale, inclusive to warunek czy ma uwzględnić krańce przedziału)
Number.prototype.between = function(a, b, inclusive) {
  var min = Math.min.apply(Math, [a, b]),
    max = Math.max.apply(Math, [a, b]);
  return inclusive ? this >= min && this <= max : this > min && this < max;
};

var windowSize = 500;

console.log(windowSize.between(500, 603, true));

Ja nie chcę jquery, tylko zwykły JS. I powiedz mi gdzie jest błąd w moim kodzie

Niestety nie mam czasu, żeby to wszystko przeanalizować, ale wpisz sobie debugger; gdzieś w kodzie, tam gdzie podejrzewasz, że może być błąd i odpal F12 w chrome np. i patrz co gdzie siedzi. Chrome Ci zatrzyma wykonywanie i jak najedziesz na zmienne to masz podglad co gdzie jest.

Poza tym w jsie masz taki event jak window.onresize. Powinieneś uzyć tego zamiast setInterval, może on coś zamula

window.onresize = function() {
    WysokoscMenu();
};

Mam jeszcze pytanie: Dlaczego kod czcionkaListyMenu=listaMenu[0].style.fontSize.replace("pt", ""); w pierwszym wywołaniu funkcji zwraca ciąg pusty a dopiero w kolejnych wartość? Ja bym zrozumiał, gdyby funkcji była wywoływania w trakcie wczytywanie strony, ale ona wywoływana jest już po załadowaniu. I nic nie pomoga, jeśli arkusz css wczytuje pierwszy a potem skrypt js

Ponieważ ta wartość NIE OZNACZA wartości aktualnie używanej z szablonów CSS. Jest tam jedynie wartość ustawiona na sztywno w atrybucie style.

Poszukaj w sieci jak pobrać tzw. computed value - czyli bieżący styl.

To pokażcie mi, jak ten skrypt ma wyglądać, bo teraz nawet u mnie nie działa

Już wszędzie działa - ogromnie dziękuję za pomoc