Test On Real Devices

Test on Real Devices

Test on as many real devices (smart phones and tablets) as you can. There is no substitute for using physical devices over emulators.

Side Load Released APK (Android only)

Like the debug version, the released version of the APK can also be sideloaded. You can transfer the APK file to a device in a number of ways:

Example: Using Google Drive

If you have Google Drive on your computer and device, you can sideload a released version of the APK onto your device. You can share the app with as many users as you want without having to go through an app store.

  1. (OPTIONAL) If neccessary, go to your app list and press the debug version of the app to uninstall it.
  2. Make a copy of the released APK and paste it into your Google Drive folder on your computer.
  3. Go back to the device and drag down to refresh the view.
    NOTE: You should see the APK from your computer appear in your Google Drive folder.
  4. Click app icon to download it on your device from the Google Drive server.
  5. Launch the app and test it.

iOS 7+ Bug Fix (iOS only)

When an iOS 7+ app is viewed, all the pages are bumped to the top of the screen within the status bar area. This problem is with iOS. We will fix this problem with JavaScript and CSS.

  1. Write (or copy) the following <script> code block below the last <script> tag in the <head> tag of the index.html file.
    WHY: To see if the user is on iOS 7 or iOS 8 and if so add a class (ios7) to the <body> tag.

    <script type="text/javascript">
    $(document).ready(function(){
    	if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS (7|8)_\d/i)) {
    		$("body").addClass("ios7");
    		$("body").append('');
    	}
    }); 
    </script>
/* Styles to fix the new iOS 7/8 transparent status bar */

  2. Open the custom_style.css files and write (or cpy) the following two CSS rules at the bottom of the page.
    WHY: To style the status bar and to add a margin at the top of 20 pixels to move content down 20 pixels. 

    /* Styles to fix the new iOS 7/8 transparent status bar */
#ios7statusbar {
	width:100%;
	height:20px;
	background-color:white;
	position:fixed;
	z-index:10000;
}
.ios7 .ui-page, .ios7 .ui-pane {
	margin-top: 20px;
}

  3. Save both the index.html and the custom_style.css file and re-zip all of the files includeing the config.xml file to be used by PhoneGap Build again. (See uploading to Phone Build for detail. However, this times you will want to click the Update Code button and then select Choose File and navigate to the newly created zip file.).
  4. Download the iOS app again and test it.
    NOTE: You should see the page content below the status bar.