cordova - Phonegap: very strange result with Intel App Framework -


i'm trying out intel's app framework in phonegap project.

in desktop browser works fine, basic example fails miserably on android device (i tried genymotion, official sdk emulator , real phone).

here's 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 distorted screen in android app, :

enter image description here

where should basic white intel app framework page blue header , blue footer.

all needed css , js files copied right places.

any ideas ?

update:

the black screen (instead of white) had android theme automatically loaded on android device.

you can use:

 $.ui.useosthemes=false; 

to prevent , use default theme (same in browser).

i suggest building ui app framework using app starter tool built intel xdk (which can download http://software.intel.com/html5) or using web-based version of same tool located @ http://appstarter.app-framework-software.intel.com.

that way can try different things , check out tool generates class definitions , tags.

also, advise against using "target-densitydpi=device-dpi" option in meta viewport tag. result in tiny text , objects on real devices due defeating virtual css resolution. virtual resolution , physical resolution don't match on mobile devices because higher physical pixel resolution used increase quality of aliasing of display , general overall appearance (the same thing apple retina displays on macbook pro or air laptop).


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -