Mobiscroll 的问题 - 方向更改和访问地址栏会导致某些移动浏览器崩溃 [英] Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers

问题描述

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

Original Title but too long for post: "ASP.NET MVC 4, Razor, JQuery, JQueryMobile, Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers. Changing scroller width and height does not work on some phones."

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

The crash issue happens on Android 2.1. It does not happen on iPhone, HTC EVO 4G LTE or other HTCs.

更改滚动条宽度和高度在 HTC 上不起作用.如果我更改为横向，则滚动条的大小与纵向时的大小相同.如果我将它改回纵向，那么滚动条的大小应该是横向的.

Changing the scroller width and height does not work on HTCs. If I change to landscape then the scroller is the same size as it should be in portrait. If I change it back to portrait then the scroller is the size it should have been in landscape.

这是 JQuery/Mobiscroll 代码:

Here is the JQuery/Mobiscroll code:

  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 脚本 {} 中(不确定这是否相关).

I am including these scripts in @section scripts {} which is rendered at the bottom of the page ( not sure if that is relevant ).

任何帮助将不胜感激.

推荐答案

事实证明，问题是较旧的 Android 手机不喜欢上面所写的调整大小事件......而较新的手机不喜欢方向改变事件.此链接中的代码使一切正常:

It turns out the problem was that the older Android phones do not like the resize event the way it was written above.... and newer phones did not like the orientationchange event. The code at this link made everything work perfectly:

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 injquery多次触发

I found the link in the answer of this post: window.resize in jquery firing multiple times

谢谢！

这篇关于Mobiscroll 的问题 - 方向更改和访问地址栏会导致某些移动浏览器崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！