Jquery-Mobile和Css不工作/加载使用PhoneGap Cordova的android？

我正在尝试使用PhoneGap为Android构建移动应用程序。如果我使用PhoneGap构建来构建android .apk文件，以下index.html代码可以正常工作。如果我只是在浏览器中运行它，它也可以正常工作。Jquery-Mobile和Css不工作/加载使用PhoneGap Cordova的android？

但是，当我尝试使用Eclipse（Android插件/ PhoneGap安装）而不是使用PhoneGap构建时，由于某种原因，css/jquerymobile不起作用，导致页面看起来很丑。

1）使用的PhoneGap构建/浏览器

enter image description here

2）使用Eclipse的Android项目

enter image description here

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="cordova.js"></script> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
     <script src="js_server/registerme.js"> </script> 
     <script src="js_server/openPages.js"> </script> 
     <style type="text/css"> 
     .bgimg { 
     background-image: url("img/dealpouch_bg.jpg"); 
     width:100%; 
     height:100%; 
     }  
     </style> 
    </head> 
    <body> 
     <div data-role="page" id="home" class="bgimg" data-theme="a"> 
     <div data-role="header" data-theme="b"> 
      <a href="index.html" data-role="button" data-icon="delete" data-inline="true" onclick="exittheSystem();">Exit</a> 
      <h4><font color="#33CCFF">Deal</font><font color="#00FF00">Pouch</font></h4> 
     </div> 
     <div data-role="main" class="ui-content"> 
      <div data-role="controlgroup" data-type= "vertical"> 
       <a href="#signuppage" class="ui-btn ui-corner-all " >Sign up for free</a> 
       <a href="#" class="ui-btn ui-corner-all " onclick="alert('Work in Progress to link facebook');"><font color="">Sign up using Facebook</font></a> 
       <a href="#loginpage" class="ui-btn ui-corner-all ">log In</a> 
       <br> 
      </div> 
     </div> 
     </div> 
    </body> 
</html>

。

package com.cfvbustransit; 

import android.support.v7.app.ActionBarActivity; 
import android.support.v7.app.ActionBar; 
import android.support.v4.app.Fragment; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.os.Build; 

import org.apache.cordova.*; 


public class MainActivity extends DroidGap 
{ 
    @Override 
    public void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     super.init(); 
     // Set by <content src="index.html" /> in config.xml 
     //super.loadUrl(Config.getStartUrl()); 
     super.loadUrl("file:///android_asset/www/index.html"); 
    } 
}

config.xml中

<?xml version="1.0" encoding="UTF-8"?> 

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml --> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
     xmlns:gap = "http://phonegap.com/ns/1.0" 
     id  = "com.dealpouch" 
     version = "2.0.0"> 

    <preference name="permissions" value="none"/> 
    <preference name="splashscreen" value="splash" /> 

    <!-- Customize your app and platform with the preference element. --> 
    <preference name="phonegap-version"   value="3.4.0" />   <!-- all: current version of PhoneGap --> 
    <preference name="orientation"    value="default" />  <!-- all: default means both landscape and portrait are enabled --> 
    <preference name="target-device"    value="universal" />  <!-- all: possible values handset, tablet, or universal --> 
    <preference name="fullscreen"     value="true" />   <!-- all: hides the status bar at the top of the screen --> 
    <preference name="prerendered-icon"   value="true" />   <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen --> 
    <preference name="ios-statusbarstyle"   value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --> 
    <preference name="detect-data-types"   value="true" />   <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --> 
    <preference name="exit-on-suspend"   value="false" />   <!-- ios: if set to true, app will terminate when home button is pressed --> 
    <preference name="auto-hide-splash-screen" value="false" />   <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --> 
    <preference name="disable-cursor"    value="false" />   <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --> 
    <preference name="android-targetSdkVersion" value="19" /> 
    <preference name="android-minSdkVersion"  value="11" />    <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. --> 
    <preference name="android-installLocation" value="auto" />   <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --> 


    <gap:plugin name="org.apache.cordova.geolocation" /> 
    <gap:plugin name="org.apache.cordova.splashscreen" /> 
    <gap:plugin name="com.dawsonloudon.videoplayer" /> 
<plugin name="File" value="org.apache.cordova.FileUtils" /> 
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" /> 


    <icon src="appicon.png" /> 

    <gap:splash src="splash.png" /> 

    <access origin="*"/> <!-- allow local pages --> 


</widget>

来源

2014-06-23 dev_marshell08

您从互联网加载CSS，出于同样没有给予许可。

来源

2014-06-23 05:48:42 Karioki

你是正确的解决了这个问题非常感谢 –

Jquery-Mobile和Css不工作/加载使用PhoneGap Cordova的android？

回答

相关问题