phonegap + jquery mobile css在android应用程序中不起作用答案

【问题标题】：phonegap + jquery mobile css not working in android appphonegap + jquery mobile css在android应用程序中不起作用
【发布时间】：2013-09-30 19:19:16
【问题描述】：

我正在尝试在移动、phonegap 和 android 应用程序中获得一个简单的 jQuery。

css 无法在 Android 手机上运行。我在同一主题上浏览了几篇文章，还尝试在本地存储 js 和 css 资产，并在 config.xml 等中添加访问权限，但没有成功。将不胜感激。

这是 html 文件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Template</title>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<script type="text/javascript" src="cordova.js"></script>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
<script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js'></script>







</head>
<body>

    <div data-role="page">
        <div data-role="header">
            <h1>Page Header</h1>
        </div>

        <div data-role="content">
            <p>Hello jQuery Mobile!</p>
        </div>

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： android css jquery-mobile cordova

【解决方案1】：

最好的办法是下载文件并将它们直接放入您的项目中。这将确保在您的应用显示之前加载资产并防止任何运行时问题。此外，如果用户打开您的应用但无法访问互联网，一切都会失败。

如果它仍然无法在本地运行，请仔细检查指向文件的指针并确保将它们放置在正确的路径中。除此之外，它没有理由不工作。

【讨论】：

我检查了一下，没有成功。另外，我在浏览器中进行了测试，效果很好。但不是在我的 Android 中...

【解决方案2】：

其实，如果网络不通，你的网页是打不开的，而你使用的是jquery mobile CDN，看来一切正常！我的建议是尝试修改您的元数据标签，首先出于调试目的：

<meta name='viewport' content='width='device-width'/>

希望我能帮上忙。

【讨论】：

【解决方案3】：

我在我的 android 手机上尝试了代码，它没有任何更改就可以工作。无需在您的配置中添加访问权限，因为这只是包含一个远程文件而不是发出跨浏览器请求。

您的 phonegap 应用设置可能存在问题。我不确定，但请检查您是否针对正确的 sdk 版本。

【讨论】：

【解决方案4】：

试试 Dom 的建议。如果仍然无法正常工作，请打开并查看您的 LogCat。我遇到了同样的问题，LogCat 说

SyntaxError: parse error at file:///android_asset/www/js/libs/jquery.mobile-1.4.1.js:3195。

我只是在该文件上注释了第 3195 行，然后 jQuery Mobile 样式就显示出来了

【讨论】：

【解决方案5】：

按以下顺序给出头部标签链接

 <link rel="stylesheet" href="css/jquerymobile132min.css" /> 
    <script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
    <script src="js/jquery191.js"></script> 
    <script src="js/jquerymobile132min.js"></script>

【讨论】：