Android fit application to screen?

You must Login before you can answer or comment on any questions.

Hello community,

I'm making an app for both iPhone and Android. It's an html application opened on the webview. The problem i'm having is that the app (html site) doesn't scale to fit the Android screen. What can I do to zoom it to fit the screen perfectly ?

We tried making some changes in the Titanium SDK for Android but with no success. After all Titanium handles what Android offeres with the ScalesPageToFit variable.

Thanks in advance

4 Answers

Hi well you can always make the web layout based on the current device heigh and width you can get the current device height and width by the below parameter.

var isAndroid = Ti.Platform.osname == 'android';
var devicewidth= Titanium.Platform.displayCaps.platformWidth;
var deviceheight= Titanium.Platform.displayCaps.platformHeight;
based on this height and width you can always set the other things.

like left: devicewidth - 20;

I hope this helps you.

— answered 3 years ago by Nikunj Sakhrelia
answer permalink
6 Comments
  • I'm not sure i understand your suggestion. What i need to do in my app is to scale the webpage inside the webview and make that page fit the screen.

    — commented 3 years ago by Eni Sinanaj

  • And

    var devicewidth= Titanium.Platform.displayCaps.platformWidth;
    var deviceheight= Titanium.Platform.displayCaps.platformHeight;
    return undefined to me. (in Android)

    — commented 3 years ago by Eni Sinanaj

  • the last comment is not to consider :)

    — commented 3 years ago by Eni Sinanaj

  • Show 3 more comments

What do you want to scale, the webview itself or its content?

If it's the webview, use something like

var webview = Titanium.UI.createWebView({
    autoDetect : [], //Prevent the auto-linking of telephone numbers
    enableZoomControls : false,
    left : 0,
    right : 0,
    top : 0,
    bottom : 0,
});
If it's the content, in the html head use:
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

— answered 3 years ago by Joao Silva
answer permalink
5 Comments
  • I want to scale the content. I'll give a try to the thing you posted even though I've tried it before. Thanks for the reply :)

    — commented 3 years ago by Eni Sinanaj

  • I noticed just now that when i doubleclick the content/webpage zooms out to fit the screen? Do you know how can I fire that event after loading the page so it imediately gets fixed ?!?

    — commented 3 years ago by Eni Sinanaj

  • I don't know how to simulate the double-click, but that behavior seems to be related to the zoom controls. Anyway, I just fixed some similar problems in my app. In my case the html was being rendered differently in an Android 2.1 and 2.2. My suggestion is that you test the html in various browsers, such as Firefox and a Webkit based browser such as Safari. Maybe there is something that is causing the undesired behavior. If you can't get it to behave properly using the regular html maybe you can force the dimensions using javascript and jQuery/zepto.js.

    — commented 3 years ago by Joao Silva

  • Show 2 more comments

I managed to fix this issue doing the following: (I hope others find it helpful too)

1. I tested different webview conbfigurations in native Android code - Java
2. Came up with the right webview settings to make it work.
3. Got help from my colege and friend @AndyWilliams who made a Titanium Mobile SDK build which we called 1.8.0.1 

(Download it here: Files.Progress44 )

4. Import the new SDK into Titanium
5. Delete from your HTML the meta tag 

&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable=0, initial-scale=0.5&quot; /&gt; There can't be any viewport in your HTML for the android version of your App 6. Make your HTML large enough for every Android screen so it will rescale it and make it fit. If it is smaller than the screen it will show it won't zoom it in to make it fit.

For those who want to know the changes that were made to the Titanium SDK here they are:

1. open TiUIWebView.java (it is in: 

[SDK]/android/modules/ui/src/ti/modules/titanium/ui/widget/webview/ )

2.Import the android java package: `import android.webkit.WebSettings.ZoomDensity;`
3. Scroll down to where you see something like this: 

WebSettings settings = webView.getSettings();

4. Under that line there are some settings set to boolean values. That's where the real change happens :P. Do a diff between these 

settings.setBuiltInZoomControls(false);
            settings.setUseWideViewPort(true);
        settings.setJavaScriptEnabled(true);
        settings.setSupportMultipleWindows(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setLoadsImagesAutomatically(true);
        settings.setLightTouchEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setLoadWithOverviewMode(true);
        settings.setDefaultZoom(ZoomDensity.FAR);
and the code that is in the original TiUIWebView.java file. 5. Build and enjoy

— answered 3 years ago by Eni Sinanaj
answer permalink
1 Comment
  • UPDATE: the link i wrote above seems to not work corectly, use this instead: http://silentfiles.com/p44/scripts/s35/upload/mobilesdk-1.8.0.1-osx.zip

    — commented 3 years ago by Eni Sinanaj

Your Answer

Think you can help? Login to answer this question!