I'm working on a Phonegap app and having an issue with CSS line-height and margin rendering differently for a glyph font on my Android device as a compiled Phonegap application vs. Chrome on my desktop.
Is there a way to specify a CSS style specifically for Android's rendering engine only, similar to what you see commonly in CSS for cross-browser functionality (eg. -webkit, -moz, etc.)?
The font I'm using is http://www.entypo.com/ and the CSS styles I'm having problems with specifically are line-height and margin. My regular fonts through-out the application are not experiencing any issues like this.
If you can detect the device/environment your serving to then targeting elements specifically on that device is as simple as appending a class to the <html> tag of the page. Then just call your style declarations from that root class. For instance:
.wrapper {
background: blue; /* will apply to all documents independent of device */
}
.android .wrapper {
background: green; /* will only apply to documents with the .android base class */
}
As for detecting devices, that's an entirely different question, but this method will work assuming you can detect the device.
In your Android code, you can add to your onCreate() after you loadUrl()
this.sendJavascript("document.getElementsByTagName('body')[0].className = 'android'");
This will add an "android" class to your <body> and let you use specific CSS selectors for your Android versions of the app. If you're already applying a class to your <body>, you can do
this.sendJavascript("document.getElementsByTagName('body')[0].className += ' android'");
Related
I imported a set of files for Galano Grotesque xxx.otf font (xxx=Alt Black, Alt Black Bold, etc), and it works like a charm on iOS but not on Android. When I run the app on Android the font is not loaded.
I'm using this:
Label {
font-family: "Galano Grotesque";
color: #5b5b5f;
}
I found this post - Android Not Showing Font Icon In NativeScript - and I tried this
Label {
font-family: "Galano Grotesque", galano grotesque;
color: #5b5b5f;
}
but without success :(
Does anybody knows what I can do to solve it?
Thanks
There is one primary consideration when working with fonts in iOS and Android.
For the font to work on iOS it should use the exact font name (notice that this is not the file name!) where in Android the font should be referenced with its particular file name.
Example:
Let's assume you are using the Galano Grotesque DEMO Bold font from here (this one is free for demonstration purposes)
When downloaded you will see that the file name is as follows
Rene Bieder - Galano Grotesque DEMO Bold.otf
But the font name is (in Mac open with FontBook app to see the font-name at the top of the pop-up.. for Windows open the font with Windows Font Viewer and look for font name)
Galano Grotesque DEMO
So to use it in iOS, you should use
font-family: "Galano Grotesque DEMO";
And for Android, you should use
font-family: "Rene Bieder - Galano Grotesque DEMO Bold";
Of course, the best practice is to see what is the actual font name and rename the file with the exact name so you can reuse it in both iOS and Android with no different CSS files.
All that said check your file name under Android and make sure that reference in the CSS file is the same
Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!
your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings
I use utf8 characters / symbols from utf8icons.com on my website. The symbol below is not displayed in firefox (34.0) on android even though I chose unicode in the firefox menu. I only get a grey square.
On the desktop version of firefox and chromium, it is correctly shown:
◔
.timedark:before {
content: '\25D4';
padding-left: 3px;
color: #222;
}
What could be wrong here ?
The font being used does not contain a glyph for the character and neither does any of the fallback fonts that the browser tries to use. The cause may well be that none of the fonts in the system contains this character. The options are the use of a downloadable font via #font-face and the use of an image instead.
Creating HTML emails, I have the following seemingly insoluble problem:
Gmail strips out any in the head. You have to use inline styles.
I want my design to be different on mobile (specifically Android) which I can do with a media query in the head
But inline styles over-ride anything in the head.
So how can I make a design, for instance, 600px wide in Gmail but 100% wide on Android?
You can try to embed an <style> tag for email clients that do not remove them and override the inline rules with !important. It would look something like this:
#media all {
width:100% !important;
}
Please let me know if it works...
Use this inline css: style='width:100%; max-width: 580px;'
Once the screen width drops below 580px, the layout becomes fluid.
You can change the values for whatever fits your needs. This way, you don't run into as many cross client issues. Gmail app doesn't support tags btw.
I'm working on a mobile version of a website and I really wanted to use the HTML5 input field types number, email and tel. When I do this both Android and iOS show the keyboards I want them to when the user has those fields selected, but in Android the CSS attributes for the fields are ignored now that I changed it from type="text", specifically the CSS width attribute.
I updated my CSS file to make sure the values for input[type="text"] also applied to input[type="email"] etc.. and this works great on iOS. Is there some trick to get the Android browser to pick up CSS attributes on the new HTML5 input field types?
I'm testing on a Droid X running Android 2.2 with the default Android browser.
The problem is probably that the CSS parser does not recognize the selector and skips it. Try setting an id on it. And applying the CSS to the id.
==EXAMPLE==
<input type="email" name="email" id="foo" />
CSS:
input#foo
{
width: 100%; //OR WHATEVER
}