I'm trying out Intel's App Framework in a Phonegap project.
In my desktop browser everything works fine, but even the most basic example fails miserably on an Android device (I tried Genymotion, the official SDK emulator and a real phone).
Here's the source of 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>
Somehow I get a very distorted screen in the Android app, like this :
where this should be the basic white Intel App Framework page with a blue header and a blue footer.
All the needed css and js files are copied to the right places.
Any ideas ?
UPDATE:
The black screen (instead of white) had to do with the android theme that is automatically loaded on an Android device.
You can use:
$.ui.useOSThemes=false;
to prevent this and just use the default theme (same as in the browser).
I would suggest building your UI for App Framework using the App Starter tool that is built into the Intel XDK (which you can download from http://software.intel.com/html5) or by using the web-based version of the same tool located at http://appstarter.app-framework-software.intel.com.
That way you can quickly try different things and check out what the tool generates for class definitions and tags.
Also, I would advise against using the "target-densitydpi=device-dpi" option in your meta viewport tag. It will result in very tiny text and objects on real devices due to defeating the virtual CSS resolution. The virtual resolution and the physical resolution don't match on mobile devices because the higher physical pixel resolution is used to increase the quality of the aliasing of the display and general overall appearance (the same thing that Apple does with the Retina displays on a MacBook Pro or Air laptop).