1

我正在 Phonegap 项目中试用英特尔的 App Framework。

在我的桌面浏览器中一切正常，但即使是最基本的示例在 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 应用程序中得到了一个非常扭曲的屏幕，如下所示：

在此处输入图像描述

这应该是带有蓝色页眉和蓝色页脚的基本白色英特尔应用程序框架页面。

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

有任何想法吗 ？

更新：

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

您可以使用：

 $.ui.useOSThemes=false;

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

4

1 回答 1

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 笔记本电脑）。

于 2013-10-24T06:01:13.023 回答