Mobiscroll 的问题 - 方向更改和访问地址栏会导致某些移动浏览器崩溃

Posted 2023-05-09

【中文标题】Mobiscroll 的问题 - 方向更改和访问地址栏会导致某些移动浏览器崩溃

【英文标题】：Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers

【发布时间】：2012-11-22 13:07:41

【问题描述】：

原始标题但太长，无法发布： “ASP.NET MVC 4、Razor、JQuery、JQueryMobile、Mobiscroll 的问题 - 方向更改和访问地址栏会使某些移动浏览器崩溃。更改滚动条的宽度和高度在某些手机上不起作用。”

崩溃问题发生在 android 2.1 上。 它不会发生在 iPhone、HTC EVO 4G LTE 或其他 HTC 上。

更改滚动条的宽度和高度不适用于 HTC。如果我更改为横向，则滚动条的大小与纵向的大小相同。如果我把它改回纵向，那么滚动条的大小应该是横向的。

这里是 JQuery/Mobiscroll 代码：

  function createDatePicker(selector)
        if($("#input_date_1").scroller('isDisabled') != 'undefined')
            var scrollWidth = ($("div[id='main_content']").width())  / 4;
            var scrollHeight = scrollWidth / 2.5;
            $("#input_" + selector).scroller(
                    preset: 'date',
                    minDate: new Date(2000, 0, 1),
                    maxDate: new Date(2020, 11, 31),
                    theme: 'android',
                    display: 'inline',
                    mode: 'scroller',
                    dateOrder: 'mmddyy',
                    width: scrollWidth,
                    height: scrollHeight,
                    onChange: function (valueText, inst) 
                        var lbl = $("#lbl_" + selector);
                        var date = $("#input_" + selector).scroller('getDate');
                        lbl.text(date.toDateString());
                    
                );
        

  function setDatePickerWidthAndHeight() 
        var scrollWidth = ($("div[id='main_content']").width())  / 4;
        var scrollHeight = scrollWidth / 2.5;
        var selectorBase1 = "date_1";

         $("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth);
         $("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight);
    

  $(function () 
        createDatePicker('date_1');

        $(window).bind('orientationchange', function (event) 
            setTimeout(setDatePickerWidthAndHeight(),100);
        );
    );

我将这些脚本包含在页面底部呈现的@section scripts 中（不确定是否相关）。

任何帮助将不胜感激。

【参考方案1】：

事实证明，问题在于较旧的 Android 手机不喜欢上面写的 resize 事件......而较新的手机不喜欢orientationchange 事件。此链接上的代码使一切正常运行：

http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

这是我的使用方法：

//
// usage:
//$(window).smartresize(function () 
//    // code that takes it easy...
//);
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr) 

    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function (func, threshold, execAsap) 
        var timeout;

        return function debounced() 
            var obj = this, args = arguments;
            function delayed() 
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            ;

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        ;
    
    // smartresize 
    jQuery.fn[sr] = function (fn, threshold, execAsap)  return fn ? this.bind('resize', debounce(fn, threshold, execAsap)) : this.trigger(sr); ;

)(jQuery, 'smartresize');


  $(function () 
        createDatePicker('date_1');

         $(window).smartresize(function () 
                setDatePickerWidthAndHeight();
            , 200);
    );

我在这篇帖子的答案中找到了链接：window.resize in jquery firing multiple times

谢谢！