Develop Reference

How can I render the ♦ (Unicode Black Diamond Suit) the same on all devices?

I need to render the Black Diamond Suit (♦, U+2666) the same on multiple browsers. Unfortunately, this is an emoji as well, meaning it renders like this:
Source
when I want it to always render like the "browser" image (top left).
This is especially frustrating on iOS and Android because it's not rendered as black.
Unfortunately, Font Awesome doesn't include a usable replacement. The nearest is "Black lozenge", U+29EB ⧫︎ but it's a bit stretched.
Is there a way to force the mobile browser to render it like a desktop browser would?

Looking at the spec found on fileformat.info there is a text version of the black diamond that can be used instead:"\u{2666}\u{FE0E}"

Use this in css
color: transparent;
text-shadow: 0 0 0 black;

2023 observation: "\u{2666}\u{FE0E}" doesn't seem to work on my Android Chrome - displays red diamond.
"\u{25C6}" does work here - black diamond is displayed on phone.
HTML code ◆

CSS position causes tablet browser to black out

On especially Apple Ipad air, or ipad mini (retina) these site goes completely dark gray for approx. 30 seconds, before the site appears.
On PC/Mac or most smartphones, along with android based tablets, the page layout renders nicely.
I've narrowed it down - I hope - to CSS "position" of the wrappers.
If I remove the position: absolute; on #hoejrewrap and #hovedwrap, and position: relative on #indholdsramme, the problem is solved, but introduces overlapping divs on tablet or zooming in/out in all other browsers.
Any clues?
Trin

border-radius style doesn't work in android browser

I created a website, which I intend to display in some mobile devices. The thing is that I have created several menu options as circles.
To achieve this effect I use border-radius in a style sheet, and -webkit-border-radius and-moz-border-radius too.
On the computer it looks well in the browsers I have (firefox and chrome), but when I move to the android browser, these circles are reset to be square divs. This occurs since the load of the page.
may I use other special style for android? Could I need something like the jQuery mobile?
In short I will put the code, but if anyone has gone something like, could share that information, please? thanks

See this post for the answer: Galaxy S4 stock browser CSS3 border-radius support?
Just use the expanded border-left-radius, border-right-radius, etc as a workaround; it's a glitch in the new Android 4+ browser; a bug report has been submitted.

Hi I am using this for gradient. And this works fine in most of the browsers.
`background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
-webkit-border-radius:11px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
/* For Internet Explorer 5.5 - 7 */
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B4DCFA, endColorstr=#FF0000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
`
Can you please post the code?

-webkit-gradient in table causes border lines in Android

I have a table in a webview that I use in an android app.
The problem is that "background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));" causes a white line in between the <td>s of that table. Border-collapse or border:none only works without the gradient.
The lines does not appear on all android devices (appears on Galaxy S2, zte blade for example) and does not appear in chrome or iphone. Result is the same without just background:-webkit... but with black lines instead.
Any suggestions?
css:
.sporttable tr:nth-child(1)
{
background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));
background-size: auto;
color: #fff;
font-weight: bold;
}

I solved this using a gradient background image behind the css, this will make the lines almost non visible on the effected devices. Advantages against just using an image background is that the css scales much better and the gradient is much smoother. Far from a perfect solution, but it works.

Why is the viewport tag on the Galaxy Nexus / Android 4 not working?

I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..

The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(

I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.

I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.