The problem with the aspect ratio of the screen saver phonegap / cordova

Question

I am creating a phonegap application and everything works, but the screen saver makes me go crazy. It will be shown, but not in an ideal aspect ratio (checked on link 6). It will shrink in width.

My current splash screen is config.xml

<gap:splash src="www/res/screen/android/land_xxhdpi.png" /> <gap:splash src="www/res/screen/android/ldpi.png" gap:platform="android" gap:qualifier="port-ldpi"/> <gap:splash src="www/res/screen/android/mdpi.png" gap:platform="android" gap:qualifier="port-mdpi"/> <gap:splash src="www/res/screen/android/hdpi.png" gap:platform="android" gap:qualifier="port-hdpi"/> <gap:splash src="www/res/screen/android/xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi"/> <gap:splash src="www/res/screen/android/xxhdpi.png" gap:platform="android" gap:qualifier="port-xxhdpi"/> <gap:splash src="www/res/screen/android/land_ldpi.png" gap:platform="android" gap:qualifier="land-ldpi"/> <gap:splash src="www/res/screen/android/land_mdpi.png" gap:platform="android" gap:qualifier="land-mdpi"/> <gap:splash src="www/res/screen/android/land_hdpi.png" gap:platform="android" gap:qualifier="land-hdpi"/> <gap:splash src="www/res/screen/android/land_xhdpi.png" gap:platform="android" gap:qualifier="land-xhdpi"/> <gap:splash src="www/res/screen/android/land_xxhdpi.png" gap:platform="android" gap:qualifier="land-xxhdpi"/> <preference name="SplashScreenBackgroundColor" value="#e8413d" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3500" /> <preference name="SplashMaintainAspectRatio" value="false" /> 

Any idea what I can do? 9 patch does not work for me, I don’t know why, I don’t understand what the tool is.

Hope anyone can help

Answer 1

Change this preference to true:

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

It will keep the proportions of your splash and make a splash screen on your screen without stretching. Think of it as the equivalent of css style background-size: cover;

Answer 2

@ user3507915, when using the splash screen, the size of your splash screen image should match the size of the screen, otherwise Android will stretch the image (as you see).

Please note that sometimes the phone’s operating system returns the wrong size and aspect ratio. You can use my ScreenSize App to check the screen size. Source code is available for request.

Answer 3

To cover the patch-9 logo in all versions of Android, I had to do:

 <preference name="SplashScreen" value="background" /> 

and turn off the value of MaintainAspectRatio:

 <!-- <preference name="SplashMaintainAspectRatio" value="true" /> -->