Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 8
Registered: ‎01-04-2013
My Device: Dev Alpha B
My Carrier: Airtel
Accepted Solution

Window inner and outer height coming 346 on Q10

Hi

 

I have an application based on sencha touch 2.1, for it I override the Ext.viewport.Viewport and there I found that window.innerHeight and window.outerHeight coming 346 and complete application UI become jumbled.

If I run same application on ripple server Q10 emulator it is in very good shape. In the emulator I am getting the inner and outer height 720.

Please provide me the workaround to solve the issue.

 

Thanks & Regards

Arun

 

Ext.define('Ext.viewport.Blackberry', {
    extend: 'Ext.viewport.Default',
    constructor: function (config) {      
        this.superclass.config.height = this.getWindowHeight() + 'px';
        this.callParent([config]);
        return this;
    },
    getWindowHeight: function () {
       
        //needs more browser height ONLY when running in webworks.
        if (Ext.os.version.match('7.0')) {
            return 640;
        }
        if (Ext.os.version.match('7.1')) {
            return 640;
        }
        return window.innerHeight;
    }
   
}, function () {

});


// Insert a new Blackberry specific viewport
Ext.define( 'Ext.viewport.ViewportOverride',
{
    override: 'Ext.viewport.Viewport',
    constructor: function (config) {
        //alert(" Ext.override Ext.viewport.Viewport " + Ext.os.name + " vr " + Ext.os.version );
        var osName = Ext.os.name,
            viewportName, viewport;

        switch (osName) {
            case 'Android':
                viewportName = (Ext.browser.name == 'ChromeMobile') ? 'Default' : 'Android';
                break;
           
            case 'iOS':
                viewportName = 'Ios';
                break;
           
            case 'BlackBerry':
            case 'Other':
                viewportName = 'Blackberry';
                break;

            default:
                viewportName = 'Default';
        }

        viewport = Ext.create('Ext.viewport.' + viewportName, config);
        return viewport;
    }
});

Highlighted
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Window inner and outer height coming 346 on Q10

That will be your meta tag

 

Try something like this at the start of your HTML

 

	if(typeof window.devicePixelRatio != 'undefined') // Does device support devicePixelRatio?
		{
		dpr = window.devicePixelRatio;
		}
	
	var meta = document.createElement("meta");
	meta.setAttribute('name','viewport');
	if(dpr) // Set up the right meta
		{
		meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
		}
	else
		{
		dpr = 1;
		meta.setAttribute('content','user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,height=device-height,width=device-width');
		}

 The reason this happens is that Q10/Z10 have high density screens with a devicePixelRation around 2 so the scale want's to be around 0.5 (the above does the exact sum)

 

 




Click the like button if you find my posts useful!