为什么我的JavaScript会在iOS上崩溃？

问题描述：

我在jsFiddle上实现了这个代码，并且在桌面浏览器上工作得很好，并且在移动设备上工作到一定程度。 http://jsfiddle.net/heufT/为什么我的JavaScript会在iOS上崩溃？

什么我的代码是做

如果屏幕是大于960像素宽（或左右）正常水平导航将被显示，但是如果屏幕是小于960像素宽的导航变得分开的一个按钮，点击时会在垂直菜单中显示相同的链接。当您滚动页面时，页眉会缩小到较小的高度，如果您返回页首，页眉会回到与之前相同的高度。还有一个.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仍然崩溃，没有任何工作。

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

很想一些这方面的帮助...有人吗？ – egr103

我现在看到.scrollTop函数的问题，我认为当手势做成时，iOS触发mousewheel事件，这又会改变'header'和'ul＃prim'的状态。不知道如何解决这个......任何人？ – egr103

答

好吧，经过几天的测试后，我终于重新审视了元视口标记，并添加了与用户可伸缩属性相结合的最大比例属性，并且它解决了问题。不确定这是否是正确的方式去处理事情，因为防止用户被挤压/缩放，并因此影响可用性，但这是短期解决方案。

我的视口代码现在看起来像这样：

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

为什么我的JavaScript会在iOS上崩溃？

相关推荐