Css on different android devices

Hi there,

I am working on the android app using ionic framework where as the application is working fine on Samsung galaxy s duos device.But same application has css issues like font is not applying , stretch footer images etc on Micromax Canvas A111.

This css is working fine on firefox and chrome browser.

I am not able to find out solution for such issue.
Please help me.

Thanks in advance.

Try to search which css properties can be used on old android devices in this website: http://caniuse.com/ and if some fancy css attribute (like for example: box shadow http://caniuse.com/#search=box-shadow) try to get the desired approach using other rules, modifying the DOM or simply removing that feature.

Hey @Bonda

I am not using any fancy css attributes in my css.But it is not working for basic css attributes like font-family. And it is not available on link u provided http://caniuse.com/#search=font-family

Wierd, try to use !important on your css rules because maybe your css is being overwritten by some other rule due to a missinterpretation of the mobile browser on that device.

Yaa its really wierd issue.

I have already added font-family: "georgiai" !important;

no luck :frowning:

font name is correct and this font is supported on all devices?

If not you have to out own/special fonts in your app and load it via font-face.

Font name is correct (It is working in other devices) and I am loading this font as follows in my ionic.app.scss

@font-face {
font-family: 'georgiai';
src: url("#{$ionicons-font-path}/georgiai.eot");
src: url("#{$ionicons-font-path}/georgiai.eot") format('embedded-opentype'),
     url("#{$ionicons-font-path}/georgiai.woff") format('woff'),
     url("#{$ionicons-font-path}/georgiai.ttf") format('truetype'),
     url("#{$ionicons-font-path}/georgiai.svg#GeorgiaItalic") format('svg');


Is there any solution for this ? or we will not at all be able to run our app on different android devices ?

@mhartington Can you please look into this issues ? I am very badly stuck into it.

Hey there! So I did some digging and found it was a common issue with android.
A nice hack that people have done is to have the SVG font loaded first.

src:  url("#{$ionicons-font-path}/georgiai.svg#GeorgiaItalic") format('svg');
src: url("#{$ionicons-font-path}/georgiai.eot"),
 url("#{$ionicons-font-path}/georgiai.eot") format('embedded-opentype'),
     url("#{$ionicons-font-path}/georgiai.woff") format('woff'),
     url("#{$ionicons-font-path}/georgiai.ttf") format('truetype')

Another thing, which is more of a tip, I would move the fonts to separate folder.

Thanks @mhartington. I will try it right away and let you know … :smile:

This hack worked for me …
Also I have kept fonts in a separate folder like www\fonts\georgia and www\fonts\georgiai
Thanks @mhartington :smile:

1 Like