Question

我在Phonegap项目中试用了英特尔的App框架。

在我的桌面浏览器中，一切正常，但即使是最基本的示例也无法在Android设备上失败（我尝试过Genymotion，官方SDK模拟器和真正的手机）。

这里是index.html：

的来源

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8"  />
    <meta name="format-detection" content="telephone=no"  />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"  />

    <link rel='stylesheet' type='text/css' href='css/icons.css' />
    <link rel='stylesheet' type='text/css' href='css/af.ui.css' />

    <script type="text/javascript" src="js/appframework.js"></script>
    <script type="text/javascript" src="js/appframework.ui.js"></script>
  </head>

  <body>
    <div id="afui">
    </div>
  </body>

</html>

不知怎的，我在Android应用中看到一个非常扭曲的屏幕，如下所示：

enter image description here

这应该是带有蓝色页眉和蓝色页脚的基本白色英特尔App Framework页面。

将所有需要的css和js文件复制到正确的位置。

有什么想法吗？

更新：

黑屏（而不是白屏）与Android设备上自动加载的Android主题有关。

您可以使用：

 $.ui.useOSThemes=false;

以防止这种情况，只使用默认主题（与浏览器中相同）。

Answer 1

我建议使用内置于英特尔XDK中的 App Starter 工具（可以从http://software.intel.com/html5下载）或使用基于Web的工具为App Framework构建UI位于http://appstarter.app-framework-software.intel.com的同一工具的版本。

通过这种方式，您可以快速尝试不同的事情，并查看该工具为类定义和标记生成的内容。

另外，我建议不要在元视口标记中使用“target-densitydpi = device-dpi”选项。由于破坏了虚拟CSS分辨率，它将在真实设备上产生非常小的文本和对象。虚拟分辨率和物理分辨率在移动设备上不匹配，因为较高的物理像素分辨率用于提高显示器的混叠质量和整体外观（与Apple在MacBook上使用Retina显示器的情况相同） Pro或Air笔记本电脑）。

Phonegap：英特尔App Framework的结果非常奇怪

1 个答案: