Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выбор мобильного телефона (480px) (https://javascript.ru/forum/events/64823-vybor-mobilnogo-telefona-480px.html)

Булат Азат улы 07.09.2016 20:20

Выбор мобильного телефона (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 08.09.2016 09:38

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

Булат Азат улы 08.09.2016 18:29

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

рони 08.09.2016 21:33

Цитата:

Сообщение от Булат Азат улы
Может, как-то можно получить

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

Булат Азат улы 09.09.2016 09:34

Цитата:

Сообщение от рони (Сообщение 428058)

Спасибо, как понял, вроде то, что надо. Но сам искал - почему-то не нашел.
Но все же, почему-то после того, как вставил этот код, яваскрипт перестает работать на странице вообще:
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". Для телефонов я их сделал как обычно - вертикальными, и пытаюсь сделать, чтобы они раскрывались при щелчке (нажатии пальцем) на них.

рони 09.09.2016 10:17

Цитата:

Сообщение от Булат Азат улы
яваскрипт перестает работать

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

Булат Азат улы 09.09.2016 18:18

Цитата:

Сообщение от рони (Сообщение 428093)
5 строка!!! исправьте

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


Часовой пояс GMT +3, время: 07:29.