HTML5 Android XDK App appears zoomed in on some phones

[Emmanuel_O_1]

I am currently using intel XDK to build a HTML5 android app. App files were created with Cordova command prompt, and HTML assets was done using JQuerymobile. Files were transfered to Intel XDK for the building process and apk was obtained. However, when I install the app on some phones (Samsung Note3, Android 4.3) it appears the page is zoomed in, and displays like when you try accessing a non-responsive desktop website using a phone.

However, when I installed same app on A Samsung S5 (Android 5.0), the app displays properly the way it should be.

How can i fix this? will the meta viewport tag help? See attached screenshots. Kindly help please.

This is how it appears on the Samsung Note 3

This is how it appears on the Samsung S5

This is the current viewport meta tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

[Elroy_A_Intel]

The issue that you are experienced isn't related to Intel XDK as it doesn't modify your code but instead a jQuery Mobile scaling problem with devices like Samsung Galaxy Note. I recommend reviewing and setting the  the target-density-dpi. You can find information at http://stackoverflow.com/questions/15194940/phonegap-application-text-and-layout-too-small/15545381#15545381.

I also recommend trying to build your application with the Android-Crosswalk build target. This build target allows for a consistent rendering engine for all versions of Android versus the standard Android build target which relies on the default rendering engine.

[Emmanuel_O_1]

Thanks Elroy, the target-density-dpi solution actually worked.

Also, Crosswalk might have also been a good solution, however the crosswalk build adds an extra about 20MB to the size of the app. Is there any way around this?

[PaulF_IntelCorp]

Despite the increase in size, due to Crosswalk, it is still the best solution for Android. There are many inconsistencies in the webviews between devices on Android, and Crosswalk eliminates those inconsistencies. You ran into one of them with your two devices you are working with. There is no way you can insure against all the other devices out there because you simply cannot test on all the other devices out there.

We are working with the Crosswalk team to get a slimmer version of the Crosswalk library, but there will always be additional size added to your app as a result.

We HIGHLY recommend that you use Crosswalk, it will resolve many other issues with Android.