I have built a small website for mobile with IUI
If I use the default theme everything works fine.
To make it nicer, I have made with php an automatic theme selection depending on the kind of mobile device:
<?php if($iPod||$iPhone||$iPad) { ?>
<link rel="stylesheet" href="iui/t/defaultgrad/defaultgrad-theme.css" type="text/css"/>
<?php } else if($Android) {?>
<link rel="stylesheet" href="iui/ext-sandbox/t/android/android-theme.css" type="text/css"/>
<?php } else if($webOS) {?>
<link rel="stylesheet" href="iui/ext-sandbox/t/webos/webos-theme.css" type="text/css"/>
<?php } else { ?>
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<?php } ?>
This selectes correctly the theme depending on the device.
BUT! If I try to open the website with android using the default browser, the selected div is invisible!
If I use chrome as a browser on adroid, it works fine!
If I force the use of the default theme for all devices, the website works fine also on adroid with default browser.
If the theme-selection is enabled, when trying to load the page, for half second the page is shown correctly, after the screen becomes black
have a look here: http://jsfiddle.net/bNchQ/ (in my page i load also jquery and flexslider, that I did not include in the fiddle)