Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2016, 20:20
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

Выбор мобильного телефона (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)")?

Последний раз редактировалось Булат Азат улы, 07.09.2016 в 23:17.
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2016, 09:38
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

А это интересно как получить физический размер телефона. Может кто из господ профессоров знает трансцендентальный метод?
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2016, 18:29
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

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

Последний раз редактировалось Булат Азат улы, 08.09.2016 в 18:54.
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2016, 21:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Булат Азат улы
Может, как-то можно получить
https://developer.mozilla.org/ru/doc...dow/matchMedia
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2016, 09:34
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

Сообщение от рони Посмотреть сообщение
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". Для телефонов я их сделал как обычно - вертикальными, и пытаюсь сделать, чтобы они раскрывались при щелчке (нажатии пальцем) на них.
Ответить с цитированием
  #6 (permalink)  
Старый 09.09.2016, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Булат Азат улы
яваскрипт перестает работать
5 строка!!! исправьте
Ответить с цитированием
  #7 (permalink)  
Старый 09.09.2016, 18:18
Аспирант
Отправить личное сообщение для Булат Азат улы Посмотреть профиль Найти все сообщения от Булат Азат улы
 
Регистрация: 07.09.2016
Сообщений: 83

Сообщение от рони Посмотреть сообщение
5 строка!!! исправьте
Рони, спасибо большое! Убрал точку с запятой, и все заработало)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор номера телефона через select и кнопка позвонить Exhaust_ Элементы интерфейса 11 08.08.2016 22:35
Форма телефона - javascript yurypollanen Общие вопросы Javascript 0 16.03.2016 22:57
Имитировать выбор в списке select cha0s jQuery 1 27.03.2014 19:43
Выбор всех Select kvaleksandr Элементы интерфейса 12 27.10.2012 20:55
Проверка поля Номер телефона zhuzha Общие вопросы Javascript 7 12.05.2010 16:40