Problemas con Mobiscroll: la barra de direcciones de cambio de orientación y acceso falla en algunos navegadores móviles

Título original, pero demasiado largo para la publicación: “ASP.NET MVC 4, Razor, JQuery, JQueryMobile, Problems con Mobiscroll – la barra de dirección de cambio de acceso y acceso falla en algunos navegadores móviles. Cambiar el ancho y alto de la rueda de desplazamiento no funciona en algunos teléfonos”.

El problema del accidente ocurre en Android 2.1. No sucede en iPhone, HTC EVO 4G LTE u otros HTC.

Cambiar el ancho y la altura de la rueda de desplazamiento no funciona en los HTC. Si cambio a horizontal, la rueda de desplazamiento tiene el mismo tamaño que en vertical. Si vuelvo a cambiarlo a vertical, entonces la rueda de desplazamiento tiene el tamaño que debería tener en horizontal.

Aquí está el código de 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); }); }); 

Incluyo estos scripts en @section scripts {} que se representan en la parte inferior de la página (no estoy seguro de si eso es relevante).

Cualquier ayuda sería apreciada.

Resulta que el problema fue que a los teléfonos Android más antiguos no les gusta el evento de cambio de tamaño tal como estaba escrito anteriormente … y a los teléfonos más nuevos no les gustó el evento de cambio de orientación. El código en este enlace hizo que todo funcionara perfectamente:

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

Y aquí es cómo lo usé:

 // // 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); }); 

Encontré el enlace en la respuesta de esta publicación: window.resize in jquery firing varias veces

¡Gracias!