Css on different android devices

ionic-v1
1

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.

2

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.

3

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

4

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.

5

Yaa its really wierd issue.

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

no luck :frowning:

6

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.

7

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');

}

8

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.

9

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.

10

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

11

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