Навигационная панель не отвечает на мобильные устройства

Я пытаюсь выяснить, почему это не работает на iphone, но отлично работает на рабочем столе. попробовал это на crossbrowsertesting.com, и он отлично работает на телефонах Android, но не на iphone.Навигационная панель не отвечает на мобильные устройства

http://codepen.io/MarcRay/pen/vmJBn

// Sticky Header 
$(window).scroll(function() { 

    if ($(window).scrollTop() > 100) { 
     $('.main_h').addClass('sticky'); 
    } else { 
     $('.main_h').removeClass('sticky'); 
    } 
}); 

// Mobile Navigation 
$('.mobile-toggle').click(function() { 
    if ($('.main_h').hasClass('open-nav')) { 
     $('.main_h').removeClass('open-nav'); 
    } else { 
     $('.main_h').addClass('open-nav'); 
    } 
}); 

$('.main_h li a').click(function() { 
    if ($('.main_h').hasClass('open-nav')) { 
     $('.navigation').removeClass('open-nav'); 
     $('.main_h').removeClass('open-nav'); 
    } 
}); 

// navigation scroll lijepo radi materem 
$('nav a').click(function(event) { 
    var id = $(this).attr("href"); 
    var offset = 70; 
    var target = $(id).offset().top - offset; 
    $('html, body').animate({ 
     scrollTop: target 
    }, 500); 
    event.preventDefault(); 
});

источник

2015-07-21 user681061

Вы хотите сказать, что навигатор не будет отображаться правильно или что кнопки на nav не работают? –

Не отображается вообще на iPhone, попробовал crossbrowsertesting.com, и он отлично работает на телефонах Android. Но не на iphone .. – user681061

Если то, что показано на Codepen является полным HTML, то проблема, скорее всего, лежит в отсутствии какой-либо кода в вашем HTML.

Создайте <head> и вставьте <meta name="viewport" content="width=device-width, initial-scale=1"> в него.

Подробнее о setting the viewport - Google Docs.

источник

2015-07-21 19:52:47 Lansana

не сделал ничего, что к сожалению. – user681061

Вам нужен правильный HTML. Вам не хватает многих компонентов - DOCTYPE, head и т. Д. – Lansana

Codepen добавляет это автоматически к просмотру, поэтому у вас тоже нет, если вы проверите источник кадра в предварительном просмотре, вы увидите doctype, head и т. Д. – user681061

Я знаю, что вы можете сделать липкий эффект заголовка без использования JQuery или JavaScript с помощью следующей выдержки из JQuery мобильного

Чтобы включить этот тип элемента панели инструментов, вы наносите данных полноэкранными = «истина» атрибут и атрибут data-position = "fixed" как для элементов div верхнего и нижнего колонтитулов. Рамка также отменит заполнение контейнера содержимого (.ui-content).

источник

2015-07-25 20:06:30 RubberDucky4444

Навигационная панель не отвечает на мобильные устройства

ответ

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