爲什麼我的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仍然崩潰，沒有任何工作。

有沒有人有任何指針？我的代碼中是否有任何錯誤會導致此問題？我錯過了什麼？

來源

2012-10-22 egr103

很想一些這方面的幫助...有人嗎？ – 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">

來源

2012-10-24 23:22:08 egr103

爲什麼我的JavaScript會在iOS上崩潰？

回答

相關問題