On a 1080p emulator and Smart TV (nVidia Shield) I only get a 960x540 WebView. Is it possible to use the whole resolution available instead?
An HDTV using Android TV is considered as 960x540px display with 2x pixel ratio. Not sure how a 4k TV is recognized, but to use all the pixels, check window.devicePixelRatio .
Im looking for an answer to the same question, but i can confirm the following.
1080p TV Testing
each device configured in setting to only use 1080p 60Hz
Amazon Firestick gets 960 x 540 px in all browsers tested.
Shield TV gets 960 x 540 px in all browsers tested.
new Amazon Fire TV Cube gets 960 x 540 px in all browsers tested.
4K TV Testing
Amazon Firestick (not 4K compatible) gets 960 x 540 px in all browsers tested.
Shield TV (with output setting at 4K 60Hz) gets 960 x 540 px in all browsers tested.
new Amazon Fire TV Cube (with output setting 4K 60Hz) gets 960 x 540 px in all browsers tested.
whats more bizarre is that both 1080p and 4K test the reported pixelratio
was 2. I at least expected to see a pixel ratio of 4 on 960x540 on 4K
I use TVs connected to PC to display large tables of status data.
when fully utilized a 70" 4K TV displays hundreds of different bits of info, its a beautiful thing.
then you get an Nvidia Shield because its "4K" and discover the browser renders at 960 x 540, and the page that looks fantastic in 4K looks like blocky illegible crap.
This is what I did in Android TV 28
My app original resolution is 1080p
JS Code:
document.body.style.zoom = 1/window.devicePixelRatio
You can use WebView#setInitialScale to scale the website according to your needs. To get wanted scale you can use the code:
Point metrics = new Point();
((WindowManager) context.getSystemService(WIDNOW_SERVICE)).getDisplay(metrics);
int scale = (int) (((double) metrics.x) / 3840/*SCREEN_WIDTH*/ * 100);
You should not set additional settings like setUseWideViewPort, because it can overwrite/ignore the scale setting.
Related
I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200.
When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values, my website looks perfect on my Desktop PC(22 inch screen). But when tested on Samsung Tab A8 device, it breaks.
And Samsung Tab A8 is not in the list of simulators in Google Dev Tools. So am confused regarding the width and height that should be used in media queries. What should be the value that I should use for testing in Google Chrome in my desktop PC.
The issue is caused by the difference between Hardware Pixels (physical pixels) and Software Pixels (CSS pixels).
They are not the same!
High-resolution mobile devices have a high PPI (pixel density) to ensure sharp and clear edges. However, it would be hard to read text on such small displays with such high resolution. As such you have a "technology" implemented called DPR (Device Pixel Ratio). For most high-resolution devices it is 2. That means, that for every CSS pixel you have 2 physical pixels. In other words, your tablet has only a resolution of 960x600px CSS-wise.
An easy workaround would be the usage of:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
That ensures that the hardware pixels are the same as the software pixels. Note, that you harm User Experience and possibly make it harder to read the text for users.
I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices.
My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width)
I'd be glad if you guys could clear this up for me.
Yes, it should render the same.
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
I am starting a UI Development project for a web application. The device it is being built to perfectly work on is this monitor http://goo.gl/gUSGec which has 3840 x 2160 px resolution but it also needs to be responsive.The designs I have received are also of this resolution i.e. 3840 x 2160 px. Is there a way to perfectly simulate 4K Resolution? I have planned to use Bootstrap.
You could but i think you should customize or extend the grid system with your own values or devices sizes classes. Bootstrap use pixels instead of .em to setup font sizes, probably could be a "problem" in 4k design because the size of your assets can be reduced (Bootstrap v4 will use .em). I havent see getbootstrap.com in a 4k monitor, try and if you like what you see it means you can use it :)
I am developing my website's design, and unfortunately I don't have a 4K monitor at the moment, but I want to see how will my website look at that resolution.
I am worrying because my website's background image has 2560 x 1600 resolution and CSS parameter background-size: cover;. I hope it won't have black background-color around the image, just because the image is smaller than 4K.
So is there any way to simulate a 4K resolution on PC?
You can use Mozilla Firefox to do the same.
Press Ctrl+Shift+M and firefox shall switch to 320 X 480 Resolution, Now you can edit the values in top and set it to 4096 X 2160 to emulate 4k resolution.
You will get both Horizontal and Vertical Scrolls
Below is the sample Screen for Same :-
You can test inside a VM with the VM set to have a higher res than your real screen:
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/testing-application-on-various-screen-resolution-s/ba-p/316796
I wanted to play an Ultra HD (4K) Video with JavaFX 2 MediaPlayer but do only get a black screen (run on JRE 8/Windows 7). There are no error messages.
Does anyone know if JavaFX can play Ultra HD (4K) videos or where I can find these information?
Thank you.
I can confirm the player doesn't support anything higher than 1920 pixels wide.
I created a video this weekend with X pixels of 1980 and it couldn't play. I figured out last night to drop it down to 1920 to make the video play.
The Y pixels can be above 1080, not sure how far above you can go, but I was at around 1100 with an X of 1800 and it still played.
I can't confirm this for the Mac (with 8u60 ea). On my MacBook Pro Retina a 4K video does play, but the screen is somehow split in the middle and the right half of the video has the wrong colors.