android - Layout mismatch of device and emulator (phonegap + jquery mobile) -
i have simple application, sort of warm-up starter jquery on phonegap. run on emulator , runs fine. layout looks, good, supposed to. when install .apk on device (which happens galaxy s), html expect see ... off. mean is, on device has no colours, no transitions, plain blue links in white background. javascript files or css files not included properly? im totally newbie on this, please me out. followed http://jquerymobile.com/ 1 supposed drag , drop layout , download html,css, js files , include in project. followed http://docs.phonegap.com/en/1.8.1/guide_getting-started_android_index.md.html#getting%20started%20with%20android started phonegap.
my app name 'settling' , java file looks this:
package maddy.application; import android.app.activity; import org.apache.cordova.*; import android.os.bundle; public class settlingactivity extends droidgap { /** called when activity first created. */ @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/app.html"); } } my android manifest file looks this:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="maddy.application" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="8" /> <supports-screens android:largescreens="true" android:normalscreens="true" android:smallscreens="true" android:resizeable="true" android:anydensity="true" /> <uses-permission android:name="android.permission.vibrate" /> <uses-permission android:name="android.permission.access_coarse_location" /> <uses-permission android:name="android.permission.access_fine_location" /> <uses-permission android:name="android.permission.access_location_extra_commands" /> <uses-permission android:name="android.permission.read_phone_state" /> <uses-permission android:name="android.permission.internet" /> <uses-permission android:name="android.permission.receive_sms" /> <uses-permission android:name="android.permission.record_audio" /> <uses-permission android:name="android.permission.modify_audio_settings" /> <uses-permission android:name="android.permission.read_contacts" /> <uses-permission android:name="android.permission.write_contacts" /> <uses-permission android:name="android.permission.write_external_storage" /> <uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="android.permission.get_accounts" /> <uses-permission android:name="android.permission.broadcast_sticky" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".settlingactivity" android:label="@string/app_name" android:configchanges="orientation|keyboardhidden"> <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> </manifest> and 'app.html' looks this:
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <link rel="stylesheet" href="maddytheme.css" /> <style> /* app custom styles */ </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> <script src="my.js"> </script> </head> <body> <!-- home --> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h5> settlement </h5> </div> <div data-theme="a" data-role="header"> </div> <div data-role="content" style="padding: 15px"> <div data-role="navbar" data-iconpos="left"> <ul> <li> <a href="#page1" data-theme="" data-icon=""> users </a> </li> <li> <a href="#page1" data-theme="" data-icon=""> money </a> </li> <li> <a href="#page1" data-theme="" data-icon=""> name </a> </li> </ul> </div> <ul data-role="listview" data-divider-theme="b" data-inset="true"> <li data-role="list-divider" role="heading"> divider </li> <li data-theme="c"> <a href="#page1" data-transition="slide"> list here </a> </li> <li data-theme="c"> <a href="#page1" data-transition="slide"> list 1 </a> </li> <li data-theme="c"> <a href="#page1" data-transition="slide"> list 2 </a> </li> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <script> //app custom javascript </script> </body>
i think might forget switch on wifi internet connection or mobile network connection. faced same problem because of only. otherwise put js file locally application.
Comments
Post a Comment