1 Reply Latest reply on Mar 29, 2016 4:15 PM by devgeeks@adobe

    Android app built with phonegapp looking good on phone, but completely off after packaging as .apk

    Andras1977

      Hiya, I wrote my first app with phonegap, using jquery.mobile, bootstrap and angularjs.

      I have one problem and I haven't been able to figure out what's going wrong.

       

      When using the phonegap app, the application looks as it should be on my phone (Android, Galaxy A5). After packaging the app and installing the apg file, the app is working, but it only takes one third of the screen size and the fonts look super small (but the app is functional).

      I'm not sure what I'm doing wrong.

       

      If anyone has experienced the same issue and has a solution, I would highly appreciate any help.

       

      Screenshots enclosed at end of post (the first one how the app should look like, the second one how it looks like when running the app as .apk file.

       

      I'm using the following config.xml:

       

      <?xml version='1.0' encoding='utf-8'?>

      ------ app id etc.

          <description>

              Interactive SQL Quiz to learn and improve SQL skills. Updated weekly with new questions.

          </description>

          <author email="andreas.huebnerh@gmail.com" href="http://www.online-sql-course.com">

              Andras Huebner

          </author>

          <content src="index.html" />

          <preference name="permissions" value="none" />

          <preference name="orientation" value="default" />

          <preference name="target-device" value="universal" />

          <preference name="fullscreen" value="true" />

          <preference name="webviewbounce" value="true" />

          <preference name="prerendered-icon" value="true" />

          <preference name="stay-in-webview" value="false" />

          <preference name="ios-statusbarstyle" value="black-opaque" />

          <preference name="detect-data-types" value="true" />

          <preference name="exit-on-suspend" value="false" />

          <preference name="show-splash-screen-spinner" value="true" />

          <preference name="auto-hide-splash-screen" value="true" />

          <preference name="disable-cursor" value="false" />

          <preference name="android-minSdkVersion" value="14" />

          <preference name="android-installLocation" value="auto" />

          <preference name="android-debuggable" value="true"

       

          <icon src="icon.png" />

          <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />

          <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />

          <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />

          <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />

          <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />

          <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />

          <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />

          <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />

          <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />

          <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />

          <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />

          <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />

          <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />

          <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />

          <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />

          <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />

          <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />

          <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />

          <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />

          <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />

          <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />

          <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />

          <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />

          <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />

          <access origin="*" />

          <plugin name="cordova-plugin-whitelist" version="1" />

          <allow-intent href="http://*/*" />

          <allow-intent href="https://*/*" />

          <allow-intent href="tel:*" />

          <allow-intent href="sms:*" />

          <allow-intent href="mailto:*" />

          <allow-intent href="geo:*" />

          <platform name="android">

              <allow-intent href="market:*" />

          </platform>

          <platform name="ios">

              <allow-intent href="itms:*" />

              <allow-intent href="itms-apps:*" />

          </platform>

      </widget>

      Screenshot when running the app via phonegap app (content taking most of screen size)

      screenshot_phonegap.png

      Screenshot when running from .apk file (content in first 10% of screen looking small, but completely functional):

      screenshot_phone.png

      Many thanks in advance.

       

      Andreas