设备和模拟器的布局不匹配（phonegap + jquery mobile）答案

【问题标题】：Layout mismatch of device and emulator (phonegap + jquery mobile)设备和模拟器的布局不匹配（phonegap + jquery mobile）
【发布时间】：2012-06-30 04:39:16
【问题描述】：

我有一个简单的应用程序，有点像 jquery on phonegap 的热身启动器。我在我的模拟器上运行它，它运行得很好。布局看起来不错，就像它应该的那样。但是当我在我的设备（恰好是 GALAXY S）上安装 .apk 时，我希望看到的 html 是……关闭。我的意思是，在我的设备上，它没有颜色，没有过渡，只有白色背景中的纯蓝色链接。我的 javascript 文件或 css 文件没有正确包含吗？我完全是新手，请帮帮我。我刚刚关注http://jquerymobile.com/，其中一个应该拖放布局并为其下载 html、css、js 文件并包含在您的项目中。我还关注http://docs.phonegap.com/en/1.8.1/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android 开始使用PhoneGap。

我的应用名称是“Settling”，java 文件如下所示：

package maddy.application;
import android.app.Activity;
import org.apache.cordova.*;
import android.os.Bundle;

public class SettlingActivity extends DroidGap {
/** Called when the activity is first created. */

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/app.html");

}
}

我的 android 清单文件如下所示：

<?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>

我的“app.html”看起来像这样：

<!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="">
                            My 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>

【问题讨论】：

标签： android android-layout jquery-mobile cordova android-emulator

【解决方案1】：

您是否whitelist 是您从中加载 CSS 和 JS 的远程站点？看起来您需要添加：

http://code.jquery.com
http://ajax.googleapis.com

【讨论】：

好的。我需要在哪里添加这些？
好的，我确实将它们粘贴到了我的科尔多瓦 xml 中，但仍然没有运气 :( 解决方案不应该集中在我的 js 和 css 文件周围吗？我是新手，我不确定，但直觉告诉我如果布局和颜色等有问题，那么在包含我的 js 和 css 文件时一定有问题。告诉我你的想法

【解决方案2】：

我认为您可能忘记打开 wifi 互联网连接或移动网络连接。我只因为这个而面临同样的问题。否则，您只需将 js 文件本地放入您的应用程序中。

【讨论】：

哦，是的。太感谢了！ :)