Android App too large! (Cordova)

Exporting & Previewing Mobile Apps
1

Hello,
I have created Hype 3.5 Prof a small app (iPhone6 size).
750x1334 pix. Then scaled to 50%.
Link: http://scarf28.de/xdk/1.jpg
Export to Folder.

Then imported into Intel XDK
and an Android app (APK) created.

Link: http://scarf28.de/xdk/xdk1.jpg

Link: http://scarf28.de/xdk/xdk2.jpg

Then transferred to original Android phone.
Problem: the app is too large ???

Link: http://scarf28.de/xdk/android_view.jpg

Demo: http://scarf28.de/xdk/demo/index.html

Can you help me?

Greeting
Wolfgang

2

Are the dimensions of the app too large or the file size too large? Are you seeing an error from Cordova? Or is this error coming up somewhere else?

In this screenshot:

1.jpg942×662 83 KB

it looks like you are using Zoom to get your document to fit within the window. This is likely conflicting with this line in your code:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, width=750" />

I would change that to be:

<meta name="viewport" content="width=device-width, initial-scale=1">

You'll probably need to also ensure that the device can't be rotated, since you don't seem to have a landscape layout. Here's how to do that: cordova - How to prevent a Phonegap application to switch to landscape view - Stack Overflow

3

are you sure that the “android” setting is good for you?
You could can try also with “crosswalk for android”. I made an app with cordova + XDK with this setting.

BTW: in XDK you can lock the rotation, unfortunately it works only in android and not in IOS

4

Hello Michelangelo,
XDK with Intel it did not work again.

Hype iPhone 6 format 750x1334 pix Retina

Hype export to a folder:
index.html
index.hyperesources

www folder

Open XDK and import as HTML5

Can you give me a little guide how you do it?

Thanks for help!!!!

Greeting
Wolfgang

5

Hello,
import the project in XDK - now it OK.
Problem the width is ok,
but the hight is to long!!

Screenshot:

xdk_file.jpg750×1574 69.7 KB

Here the code:

index html { height:100%; } body { background-color:#FFFFFF; margin:0; height:100%; } 
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- end copy -->

<div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:750;overflow:hidden;" aria-live="polite">
    <script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?73960"></script>
</div>

<!-- end copy -->

Link:

code1.jpg979×575 82.6 KB

Thanks for help
Wolfgang

6

Can you try removing the height:100% values you have for both the HTML and Body?

Or, you could also try setting the height to be 750px, since that’s the height of your Hype document.

7

Hello there,
Hype’ve checked,
the error was already in hype.
Test to Reflect - width OK Length too long
The result itself in Android test.
Have the Project as a zip attachment.
Where is my fault ???
Thank you for your help.

Link:

test.jpg750×359 115 KB

Project Zip:
scarf28.de/xdk/new/test22.hype.zip

8

Have you created breakpoint for each screen? You need to relayout your design to fit with each iPhone screen height.