导航栏在移动设备上没有响应答案

【问题标题】：Navigation bar doesn't respond on mobile devices导航栏在移动设备上没有响应
【发布时间】：2015-07-21 19:45:10
【问题描述】：

我试图找出为什么这在 iphone 上不起作用，但在桌面上却很好用。在 crossbrowsertesting.com 上尝试过，它在 android 手机上运行良好.. 但在 iphone 上不行。

   // 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();
});

【问题讨论】：

您的意思是导航无法正确显示，还是导航中的按钮不起作用？
在 iPhone 上根本不显示，试过 crossbrowsertesting.com，它在 android 手机上运行良好.. 但在 iphone 上不行..

标签： jquery jquery-mobile mobile navigation

【解决方案1】：

如果 Codepen 上显示的是您的完整 HTML，那么问题很可能在于您的 HTML 中缺少某些代码。

创建一个<head> 并将<meta name="viewport" content="width=device-width, initial-scale=1"> 插入其中。

阅读更多关于setting the viewport - Google Docs。

【讨论】：

您需要正确的 HTML。您缺少许多组件 - ！DOCTYPE、head 等。
Codepen 会自动将其添加到预览中，因此您没有太多，如果您在预览中检查框架源，您会看到 doctype、head 等。

【解决方案2】：

我知道您可以通过使用 jquery mobile 的以下摘录，在不使用 jquery 或 javascript 的情况下实现粘性标题效果

要启用此工具栏功能类型，您应用 data-fullscreen="true" 属性和 data-position="fixed" 属性到页眉和页脚 div 元素。框架还将取消设置内容容器 (.ui-content) 的填充。

【讨论】：