CODEWITHSUNDEEP
androidcssgoogle-chromefontscordova
activelogic
activelogic

Reputation: 1325

Is there a way to specify CSS specifically for Android

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.

Upvotes: 0

Views: 3245

Answers (2)

jprofitt
jprofitt

Reputation: 10964

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

Upvotes: 0

monners
monners

Reputation: 5302

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.

Upvotes: 1

Related Questions