Выбор мобильного телефона (480px)

[Булат Азат улы]

Всем привет. Оптимизирую сайт под мобильные устройства. Создал под них отдельный CSS-файл с помощью

<link href="css/styleMobile.css" type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)">

И для них я полностью изменил основную навигацию. Теперь в яваскрипте нужно для экранов с "max-device-width: 480px" - один скрипт, а для остальных - другой.

if (выбор телефонов с экраном до 480) {
	$("#nav ul li").click(function(){
	$(this).next().slideToggle(500);
	});
};
else {
	$("div#nav ul li").mouseover(function() {
			$(this).find('ul:first').show();
	});
	$("div#nav ul li").mouseleave(function() {
		$("div#nav ul li ul").hide();
	});
};

Проблема в том, что я никак не могу понять, как выбрать такие телефоны. использовать "(window).width()" не получится, так как сейчас маленькие телефоны имеют такое же разрешение, как и десктопы.

В общем, как мне выбрать в яваскрипте то устройство, которую мета-мег CSS - media мне выбрал ("screen and (max-device-width: 480px)")?

[warren buffet]

А это интересно как получить физический размер телефона. Может кто из господ профессоров знает трансцендентальный метод?

[Булат Азат улы]

Может, как-то можно получить через то самое значение CSS "screen and (max-device-width: 480px)"?

[рони]

Может, как-то можно получить

https://developer.mozilla.org/ru/doc...dow/matchMedia

[Булат Азат улы]

https://developer.mozilla.org/ru/doc...dow/matchMedia

Спасибо, как понял, вроде то, что надо. Но сам искал - почему-то не нашел.
Но все же, почему-то после того, как вставил этот код, яваскрипт перестает работать на странице вообще:

if (window.matchMedia("screen and (max-device-width: 480px)").matches) {
		$("#nav ul li").click(function(){ // Навигацияны күрсәтү һәм яшерү - телефоннар өчен
		$(this).find('ul:first').slideToggle(500);
		});
	};
	else {
		$("div#nav ul li").mouseover(function() { // Төп навигация
				$(this).find('ul:first').show();
		});
		$("div#nav ul li").mouseleave(function() {
			$("div#nav ul li ul").hide();
		});
	};

Если все это закомментировать, оставить только это

$("div#nav ul li").mouseover(function() { // Төп навигация
		$(this).find('ul:first').show();
	});
	$("div#nav ul li").mouseleave(function() {
		$("div#nav ul li ul").hide();
	});

, то все работает.
Я в яваскрипте не так хорошо разбираюсь, кто знает причину, подскажите, пожалуйста?

"#nav ul li" - это список навигации. Для десктопов он расподожен горизонтально, и при наведении мышкой раскрывается "список в списке" - "#nav ul li ul". Для телефонов я их сделал как обычно - вертикальными, и пытаюсь сделать, чтобы они раскрывались при щелчке (нажатии пальцем) на них.

[рони]

яваскрипт перестает работать

5 строка!!! исправьте

[Булат Азат улы]

5 строка!!! исправьте

Рони, спасибо большое! Убрал точку с запятой, и все заработало)))