Android fit application to screen?

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 4 years ago by Nikunj Sakhrelia
    • 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 4 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 4 years ago by Eni Sinanaj
    • the last comment is not to consider :)

      — commented 4 years ago by Eni Sinanaj
    • Hope you get the device widht and height if yes do add a vote for me…

      — commented 4 years ago by Nikunj Sakhrelia
    • yeah i get them but that's of no use for my problem…

      — commented 4 years ago by Eni Sinanaj
    • use it like this-

      var widthFactor= Titanium.Platform.displayCaps.platformWidth/320;
      var heightFactor= Titanium.Platform.displayCaps.platformHeight/480;
      var webView = Ti.UI.createWebView({height : heightFactor * 480, width : widthFactor * 320});

      — commented 4 years ago by nitin soni
  • 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 4 years ago by Joao Silva
    • 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 4 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 4 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 4 years ago by Joao Silva
    • Yeah i'm looking at zepto as a solution cause i tried everything and nothing is working correctly. Thanks for your support

      — commented 4 years ago by Eni Sinanaj
    • Thanks Joao Silva,
      It works for me.

      — commented 4 years ago by naveen butola
  • 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 

    (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; &#x2F;&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 (it is in: 

    [SDK]&#x2F;android&#x2F;modules&#x2F;ui&#x2F;src&#x2F;ti&#x2F;modules&#x2F;titanium&#x2F;ui&#x2F;widget&#x2F;webview&#x2F; )

    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 

    and the code that is in the original file.

    5. Build and enjoy
    — answered 4 years ago by Eni Sinanaj
    1 Comment
    • UPDATE: the link i wrote above seems to not work corectly, use this instead:

      — commented 4 years ago by Eni Sinanaj
  • i cant find the folder on windows…