Я показываю панель уведомлений на своем веб-сайте, и, честно говоря, она не работает хорошо, когда она находится на мобильном устройстве. Я бы хотел показать планку ТОЛЬКО для пользователей настольных компьютеров.
Каков самый простой способ определить, находится ли пользователь на рабочем столе или на мобильном устройстве?
Отметьте http://detectmobilebrowsers.com/
Работа для Javascript, jQuery и т.д.
Я считаю, что лучше всего использовать функцию обнаружения. Используйте Modernizr, чтобы определить, является ли это сенсорным устройством. Вы можете делать такие вещи, как:
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
И затем используйте CSS Media Queries для обработки ширины экрана (а также легко определить ширину экрана с помощью javascript). Таким образом, вы можете правильно обрабатывать сенсорные устройства с помощью больших экранов или без сенсорных устройств с небольшими экранами.
Проверка агента пользователя является "самой простой", хотя вы можете легко использовать мультимедийные запросы CSS3
Вот пример, который проверяет iphone, android и blackberry; вы можете легко добавить другие мобильные браузеры.
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
Если вы используете modernizr. к элементу будет добавлен класс "без касания". Вы можете скрыть панель по умолчанию и добавить правило css, чтобы показать панель, если существует класс "без касания". Пример:
по умолчанию:
.bar{display:none;}
рабочий стол:
.no-touch .bar{display:block;}