Question

我在jsFiddle上有这个代码，它已经实现并且可以在桌面浏览器上正常运行，并且可以在移动设备上运行。 http://jsfiddle.net/heufT/

我的代码正在做什么

如果屏幕宽度大于960px（或左右），将显示正常的水平导航，但是如果屏幕宽度小于960px，则导航将变为按钮的一部分，单击该按钮会在垂直方向上显示相同的链接菜单而不是。当您滚动页面时，标题将缩小到较小的高度，如果您回到顶部，标题将返回到与之前相同的高度。还有一个.load脚本可以确保即使您调整浏览器大小（主要用于桌面）也会发生这种情况。

jQuery(document).ready(function($){

// prepend menu icon
$('nav').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
    $("ul#prim").slideToggle();
    $(this).toggleClass("active");
});

});

// Navigation resize event on scroll
$(document).scroll(function(){

if($(window).width()>959){
      $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

if ($(this).scrollTop()>105){
    // animate fixed div to small size:
    $('header').stop().animate({ height: 90 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');
    $('ul#prim').stop().animate({ top: 62 },50, 'linear');
    $("img.logo").fadeOut();
    $("img.bao_logo").fadeIn(1000);
} else {
    //  animate fixed div to original size
    $('header').stop().animate({ height: 175 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');  
    $('ul#prim').stop().animate({ top: 105 },50, 'linear');
    $("img.logo").fadeIn(1000);
    $("img.bao_logo").hide();
}

});

$(window).resize(function() {
if($(window).width()>959){
    $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

// Showreel
$(window).resize(function(){
    // Resize video to fix aspect ratio when window resizes
    // Only do this if video is currently visible
    if ($('#showreel').height()!=0){
        $('#showreel').height(($('#showreel').width()/16)*9);
    }
});
});

(function($){

// Custom scrollbars for work feature on homepage
$(window).load(function(){
    $(".scroll-pane").mCustomScrollbar({
            horizontalScroll:true,
            mouseWheel: false
    });
});

})(jQuery);

问题

我在iPad和iPhone上注意到的一件事尤其是JS会工作，但是当你捏/缩放时Javascript完全中断并且导航按钮不起作用，我的标题也没有缩小/增长。

我尝试使用元视口标记禁用捏合/缩放，这显然会阻止用户放大页面，但即使您至少尝试捏合/缩放并且它没有做任何事情，我也注意到了JS仍然打破，没有任何作用。

有没有人有任何指示？我的代码中是否有任何错误会导致此错误？我错过了什么吗？

Answer 1

好的，经过几天的测试后，我最终重新访问了元视口标记，并添加了一个最大比例属性和用户可伸缩属性，并解决了问题。不确定这是否是正确的方法，因为用户无法进行缩放/缩放，从而影响可用性，但这也是一个短期解决方案。

我的视口标签现在看起来像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

为什么我的Javascript会在iOS上中断？

1 个答案: