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

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



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



Ext.define('Ext.viewport.Blackberry', {
    extend: 'Ext.viewport.Default',
    constructor: function (config) {      
        this.superclass.config.height = this.getWindowHeight() + 'px';
        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';
            case 'iOS':
                viewportName = 'Ios';
            case 'BlackBerry':
            case 'Other':
                viewportName = 'Blackberry';

                viewportName = 'Default';

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

Posts: 1,230
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");
	if(dpr) // Set up the right meta
		meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
		dpr = 1;

 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!