Thursday, November 12, 2015

Ionic app - display tweaks for Android versions between 4 and 4.4



Ionic works great for most of the browsers. We faced some issues while testing on Android 4.1.1 and 4.2 webkit browsers. Following are some of the tweaks in html, css which resolved the issues we were facing. Main issue was how to debug and find out the issues as there is very limited support for browser testing in versions < 4.4. This stackoverflow answer helped me to get old Safari version which works on same webkit version that of jelly bean.
http://safari.en.softonic.com/

 http://stackoverflow.com/questions/31073592/how-to-develop-cordova-apps-for-jelly-bean



HTML changes to make it work on android browsers > 4.0.
1. float:left and float:right does not work on some divs. Remove, if not necessary.  - This will fix display errors.
2. button-bar adds some style due to which icon is not shown. (eg. - add button on rates and payments screens) - remove the button bar displays icon.
3. Add display-block for all drop downs (select element). This will help them to show with 100% width, else it will take only space required in select elements.
4. Placeholder is not shown for input type "number" - solution is onfocus:"this.type='number'" onblur="this.type='text'" or make input-type="tel"

No comments:

Post a Comment