Функция JavaScript IF для распознавания мобильного устройства

В настоящее время я создаю сайт, на котором у меня есть липкий фиксированный заголовок. Веб-сайт построен на Bootstrap, однако, поскольку мне не очень нравятся заголовки Bootstrap, я решил сделать простой сам.Функция JavaScript IF для распознавания мобильного устройства

http://quarndoncurtaindesign.besaba.com/

Липкие заголовки отлично работает с некоторыми незначительными проблемами. Однако на мобильных телефонах это совсем другая история. Поскольку, очевидно, заголовок занимает много места по вертикали, он занимает слишком много места на мобильном устройстве.

Я решил, что было бы лучше сохранить меню в своем липком состоянии, но я использую этот Javascript для добавления «липкого» класса на некоторые элементы, чтобы я мог настроить его в CSS.

$(window).scroll(function() { 
if ($(this).scrollTop() > 1){ 
    $('header').addClass("sticky"); 
    $('header h1').addClass("sticky"); 
    $('p#tagline').addClass("sticky"); 
    $('ul').addClass("sticky"); 
    $('a').addClass("sticky"); 
    $('#top').addClass("sticky"); 
    } 
    else{ 
    $('header').removeClass("sticky"); 
    $('header h1').removeClass("sticky"); 
    $('p#tagline').removeClass("sticky"); 
    $('ul').removeClass("sticky"); 
    $('a').removeClass("sticky"); 
    $('#top').removeClass("sticky"); 
    } 
});

Любой совет, указывающий на меня в правильном направлении, был бы весьма признателен.

источник

2015-06-07 gvizzle

Возможный дубликат [Обнаружение мобильного браузера] (http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) – Siguza

Возможный дубликат [Что является лучшим способом для обнаружения мобильного устройства в jQuery?] (http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – maxdaniel98

Я предлагаю вам попробовать медиа-запросы, где вы можете изменить заголовок в зависимости от размера экрана устройства – Shafeeque

Это хорошая практика, чтобы использовать JS, как это. Добавив класс к элементу, вы можете ориентировать элемент с помощью CSS.

Однако есть несколько проблем с вашим подходом.

Вам нужно всего лишь применить класс «липкий» к заголовку. Я не вижу причин, по которым вам нужно будет применить липкий класс к любым другим элементам на странице.

Что-то вроде этого следует сделать трюк:

header.sticky { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 
body { 
    padding-top: 100px /* Height of header.*/ 
         /*This will offset the content below the header */ 
}

Кроме того, я не думаю, что нужно даже в JS, если заявление здесь в качестве заголовка всегда будет липким.

Если у вас возникли проблемы с мобильной точки зрения, то вы должны использовать media queries для коррекции смещения содержания под заголовком

источник

2015-06-07 15:06:33 Jackson

Вы могли бы получить больше пользы из CSS медиа-запросов, чем JS кода в этом случае. Они позволят вам распознавать устройства, среди прочего, их размер экрана и указать разные макеты для разных установок.

источник

2015-06-07 15:14:48 Grizzled

Я согласен с первыми двумя ответами, что это прецедент, наиболее подходящий для запросов CSS и/или CSS.

Однако, если вы по-прежнему предпочитают, чтобы обнаружить, если пользователь находится на мобильном устройстве с JavaScript, вы можете быть в состоянии использовать следующее (или вариацию следующего) Код:

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
// some code.. 
}

^Этот фрагмент кода был взят из https://stackoverflow.com/a/3540295/1525109

источник

2015-06-07 15:37:33 richardgirges

Функция JavaScript IF для распознавания мобильного устройства

ответ

Смежные вопросы