【问题标题】:Phonegap css height % not working in android 4.2 - 4.3Phonegap css height % 在 android 4.2 - 4.3 中不起作用
【发布时间】:2016-05-17 05:04:32
【问题描述】:

我总是使用 android 5.0 手机和 android 4.4 手机来测试我的应用程序。他们总是工作。昨天,我找到了一部 android 4.3 手机并用它测试了我的应用程序。它们工作不正常 - 高度 (%)。然后我在安卓 4.2 手机上做了同样的事情,看看它是否可以工作。但它是一样的。我该怎么做才能解决它?

【问题讨论】:

标签: javascript android html css cordova


【解决方案1】:

我也遇到过这个问题,直到页面实际显示在屏幕上才知道页面的大小及其内容。

所以我所做的是使用触发自定义事件(使用 jquery):http://api.jquery.com/trigger/

我在 JS 中将规则与自定义事件绑定,例如(使用标准屏幕尺寸):

$('body').on('custom_event:elements_loaded',{'fsContainer':fsContainer,'elementToCenter':elementToCenter,'zoneToCenterElementIn':zoneToCenterElementIn},function(event){

            fsContainerHeight = ViewManagementTools.getValueFromPixelSizeString($('#'+event.data.fsContainer).css('height'));
            elementToCenterHeight = ViewManagementTools.getValueFromPixelSizeString($('#'+event.data.elementToCenter).css('line-height'));

            ztceiChild = $('body').find('[id='+event.data.zoneToCenterElementIn +'] div');
            zoneToCenterElementInHeight = ViewManagementTools.getValueFromPixelSizeString($(ztceiChild).css('height'));

            marginToApply = (zoneToCenterElementInHeight - elementToCenterHeight)/2;
            $('#'+event.data.zoneToCenterElementIn).parent().css('height',zoneToCenterElementInHeight+'px');
            $('#'+event.data.elementToCenter).css('margin-top',marginToApply+'px');
            $('#'+event.data.elementToCenter).css('height',elementToCenterHeight);
            if(fsContainerHeight<=elementToCenterHeight){
                $('#'+event.data.fsContainer).css('height',elementToCenterHeight + 2*marginToApply);
            } else {
                marginToApply = (fsContainerHeight - elementToCenterHeight)/2;
                $('#'+event.data.elementToCenter).css('margin-top',marginToApply+'px');

            }
        });

然后当页面显示时,或者甚至在设备准备就绪时,如果您使用标准尺寸的屏幕来布局内容,您就可以触发事件:

        $('body').trigger('custom_event:elements_loaded');

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-07-31
    • 1970-01-01
    • 2011-12-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-06
    相关资源
    最近更新 更多