Develop Reference

HTML on android device don't show correctly

My site on desktop looks great but on android no.
You can see the image
and my site URL is http://alkhayatt.com
I use bootstrap 3 and RTL and theme.
My code don't show any error and I don't know why that happen.
I did a lot of try but nothing work , so I change classes and make another div,
bootstrap 3 Arabic good style css .

Adding a 100% width to body should do the trick.
body {
width: 100%;
}

Android ignoring font-style:italic in CSS code

I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?

In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}

How to make inline-block in Chrome for Android work properly?

I'm trying to set up a page that looks good in Chrome for Android as well as in desktop Chrome.
I've got it working well in desktop Chrome, as per this screen shot:
.
The two "Answer Choice" lines, including the red "X" buttons, are in a div (called answers). The green "+" button is in the layout after the answers div. I've applied display: inline-block to the answers div, and as you can see, it's working as expected.
However, when I try to do this in Chrome for Android, the inline-block style doesn't seem to be working properly:
I can confirm that the style is being applied (I can use the remote inspector). If I remove the style, the green "+" button moves up a few pixels, showing that it is doing something, just not what I want.
How can I force Chrome on Android to respect the inline-block style?
EDIT: Here's the CSS applicable to the div containing all the answer choices:
.answers {
display: inline-block;
margin-bottom: 5px
}

I had the same issue, and found the solution on another question about div's and inline-block style. It's because of the way white-space collapses in html. You need to change your html so that the first button's close tag has no space between the second button's open tag.
<button class="button1">1
</button><button class="button2">2
</button>
See inline-block elements are line breaking for seemingly no reason?

I've experienced inline-block behaving inconsistently on Android as well. While I haven't been able to track down exactly what's going on, in many cases you can get away with using display: inline, which renders consistently.
Of course, you cannot use margin on inline elements. To address the vertical positioning, you can use vertical-align: middle.

Try to add "!important" to the "display: inline-block;"-attribute. Then it should look like this:
display: inline-block !important;

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.

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

Firefox for Android (v18) CSS Reset?

I'm struggling to remove unwanted box shadows and gradients from elements such as including <input type="text">, <textarea>, <select>, and <button> in the latest version of Firefox for Android (v18). The desktop counterpart of Firefox for Ubuntu and Windows does not exhibit the same issue.
Safari on iOS also adds styling to make certain elements appear more native-like, however resetting the unwanted styles was fairly easy thanks to -webkit-appearance: none.
Mozilla's Developer Docs do mention support for -moz-appearance: none, however it does not seem to work as intended on Firefox for Android.

This issue is well documented on bootstrap, removing the background image has worked for me
https://github.com/twbs/bootstrap/issues/8702
background-image: none;

You need to set
background:#fff;
border:0;
border-radius:0;
box-shadow:none;
etc

Override the Firefox-specific button background gradient e.g.:
background: -moz-linear-gradient(top, #ffffff, #ffffff);