为啥我的 Javascript 在 iOS 上会中断？

Posted 2023-03-12

【中文标题】为啥我的 Javascript 在 iOS 上会中断？

【英文标题】：Why would my Javascript break on iOS?为什么我的 Javascript 在 iOS 上会中断？

【发布时间】：2012-10-22 09:27:43

【问题描述】：

我在 jsFiddle 上有这段代码，该代码在桌面浏览器上运行良好，并且在一定程度上可以在移动设备上运行。 http://jsfiddle.net/heufT/

我的代码在做什么

如果屏幕宽度大于 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 仍然崩溃，没有任何效果。

有没有人指点？我的代码中是否有任何错误会导致这种情况？我错过了什么吗？

【问题讨论】：

在这方面需要一些帮助...有人吗？

我现在看到 .scrollTop 函数存在问题，因为我认为当做出手势时，ios 会触发鼠标滚轮事件，进而改变“标题”和“ul#prim”的状态.不知道如何解决这个问题......有人吗？

【参考方案1】：

好吧，经过几天的测试，我最终重新访问了元视口标签，并添加了一个最大比例属性和用户可缩放属性，它解决了这个问题。不确定这是否是正确的处理方式，因为防止用户捏/缩放并因此影响可用性，但这仍然是一个短期解决方案。

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

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