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 :)
Related
I'm developing a little webapp.
I tried displaying some output in an sort of ascii art way, using boxdrawing characters.
However, I noticed that on Android the space ( ) isn't equal width with the other characters, leading to ugly output.
I've put the font as monospace and even tried the monospace,monospace CSS setting.
To see what I'm talking about:
Please open https://tpgnow.herokuapp.com/CERN on Android and on a desktop browser.
Expected Output (desktop browser):
Actual Output (android browser):
I've tried different browsers and platforms and devices.
It seems to work on Win, Mac, Chrome and Firefox, also on iOS, but not on Android (neither Chrome nor Firefox).
Does anybody have a solution for this problem?
I ran into this exact same problem! Box drawing gliphs are missing in Google fonts.
Adobe's Source Code Pro has them. Mononoki should too.
I suspect may other issues with Android monospace are due to this general issue.
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
I've got an issue that I'm trying to get to the bottom of and I can't seem to find an appropriate answer. Our mobile website - currently in test - uses a 3D Secure iframe.
Our tests have confirmed that where the iframe displays properly when using an Android phone (in-built webkit-based browser, Samsung Galaxy S II), it unfortunately does not for an iPhone (again, in-build webkit-based browser, Apple iPhone 4S). The iPhone simply does not display the iframe. I'm uncertain whether the iframe won't show or if it is merely positioned off-screen (but there are no CSS properties applied to either the iframe or parent that would affect its position/float/margins/padding).
Is there a major difference between two webkit-based browsers on different phones which would account for this? Has anyone suffered from the same issue? And if you can help, how do I try to solve it?
<iframe id="authenticationFrame" name="authenticationFrame" src="3d-secure-bit" height="400" width="330"></iframe>
Thanks,
The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.