Develop Reference

Supported CSS-GRID browser on Sony Android tv

I created a web application dashboard which looks totally fine on the browser on the pc. Now what I would like to do is show this application 24/7 on a Sony Android tv with model number (BRAVIA 2017, android v. 7.0 kernel version 3.10.79).
Chrome natively isn't supported so I tried installing it using an APK. The thing is it the application doesn't look good due to the fact that this browser has a window width of about a 1000px and a height of 417 pixels. I tried downscaling in Chrome settings on the tv but it doesnt work.
Does anyone have any suggestions on what I could try or what other browsers are supported with a nice viewport width and height?
The native build in browser does not support css-grid
EDIT:
The default browser is called Vewd

It's a fact that some browsers ignore CSS they don't understand. If a browser which does not support CSS Grid comes across something it doesn't know, it throws that line away and continues.
Maybe you can use some old CSS like float,
or something to provide a grid type of layout, like
display: table-cell :)

Why is Firefox behavior not consistent?

I made my photography website as cross platform as I could without making separate web pages. This is my webpage.
It validates ok in w3c, and works perfectly in Chrome and Firefox for Linux, and in Chrome, Dolphin and the default browser for Android. However, it goes crazy in Firefox for android phones: it zooms in a lot with no reason, and the formatting is totally wrong.
Of course this is a bug in Firefox since it is not consistent between platforms, but which is the culprit? How can this be avoided? I guess there's something that can be done in the big IMG at the beginning of the page to prevent this.
EDIT: Firefox for tablets works fine too.

Google Webfont acting weird on Chrome

I'm using Google Webfont Roboto and Yanone on my Wordpress blog. I'm using WP enqueue to load the fonts:
wp_register_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,500|Yanone+Kaffeesatz:400,700', array(), null );
wp_enqueue_style( 'google-fonts' );
Now the strange behavior is as follows:
The font loads (I can see that on my dev tools). But it doesn't show.
When I hover on the Yanone font, it shows up mysteriously.
When I hover on the Roboto font, it doesn't show up. But when I right click on it, It shows up.
Also, if I open the dev tools/inspect element, the font shows up.
There's no way to show the fonts on Chrome for Android.
It works fine in all browsers except Google Chrome. (both on Windows and Android phone)
Strangely, it was working fine with Chrome too but suddenly it stopped working. (probably after Chrome updated)
I'm racking my brains apart with the issue. Nothing seems to fix it. Shame that Google can't render its own fonts properly while Firefox etc. has no problem.
Can someone please help me with a workaround? I'm stuck. :(
p.s. I'm using W3 Total Cache plugin. Just FYI.

Phonegap app, font issue with 4.x androids

I'm developing an app in phonegap and I'm now searching for days to solve this problem. I checked every other topic related to custom font faces but no one has already faced my problem.
The matters is that I want to show farsi fonts in my app. it works well in PC , android browser and phonegap apps in android 2.x and 4.4 (kitkat) but all I have in android 4.1 and 4.2 is default farsi fonts.
here is my code but I tried every other possible variations even using Base64 encoded fonts into my css.
#font-face {
font-family: 'B Yekan';
src:url('../fonts/byekan.eot?#') format('eot'),
url('../fonts/byekan.woff') format('woff'),
url('../fonts/byekan.ttf') format('truetype');
}
h2,h1,h3 {
direction:rtl;
font-family:B Yekan,'B Yekan'!importan;
}
I tried to move the fonts into asset folder or even put fonts near my css and index.html, no chance. I think it's a bug with android 4.x webview (except kitkat) but I have no idea what I can do for this. every kind of help is appreciated.

I experienced the same. The strangest of all is that if the font is applied to general tags like body or label it works! Just not when using the H or P tags.
So it can't be a render or location issue, but I haven't found a solution yet either.
UPDATE:
It seems like Android 4.2 has an issue with text-rendering set to optimizeLegibility. Which in my case foundation does in the background. Setting it to auto solved it here.
Found it here:
font-face on android 4.0.x doesn't work

Monospace CSS not working in Chrome for Android

I'm trying to render code in monospace on my personal web site. The following CSS style works on desktop browsers (and Firefox for Android) without issues, but fails on Chrome for Android:
.code {
font-family:Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Adding Droid Sans Mono does not help:
.code {
font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
background-color:#F0F0F0;
}
Simply using font-family:monospace works correctly on Chrome for Android, but by doing so, I lose the ability to use specific fonts on desktop operating systems.
How do I get code to display with a monospaced font on Android without losing the ability to use specific fonts on other platforms? I don't want to use custom fonts as suggested by the answer to this question, I just want to use the monospaced font provided by the system.
For reference, the style file is here.

Chrome can't access Droid Sans Mono by specifying the name that way, monospaced is mapped directly to the Droid Sans Mono font already.

It now works after updating to Chrome 30. Looks like a browser bug after all...

The default monospace font can be modified in the web browser settings. It also depends on the operating system being used.
To ensure consistent results, you need to load your own font.
What worked for me is:
#import url('https://fontlibrary.org/face/dejavu-sans-mono');
.monospace {
font-family: 'Dejavu Sans Mono', monospace;
font-variant-numeric: tabular-nums lining-nums;
font-kerning:none;
}